CSS 2 column Fluid Layout Problem [Archive]

View Full Version : CSS 2 column Fluid Layout Problem

Wizywyg

08-06-2010, 05:29 PM

I have an issue with a 2 column CSS layout.

Here is my code:

<style>
#container1 {
float:left;
width:100%;
}
#col1 {
float:left;
width:30%;
background:red;
}
#col2 {
float:left;
width:70%;
background:yellow;
}

</style>

<div id="container1">
<div id="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis augue, elementum nec euismod vel, ultricies a lorem. Duis ac posuere sem. In feugiat ante in orci ultricies non sagittis felis consectetur. </div>
<div id="col2"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis augue, elementum nec euismod vel, ultricies a lorem. Duis ac posuere sem. In feugiat ante in orci ultricies non sagittis felis consectetur. In hac habitasse platea dictumst. Etiam urna magna, tincidunt eu venenatis ac, imperdiet fermentum arcu. Pellentesque vehicula sollicitudin bibendum. Donec eu eros nibh. Phasellus ultricies aliquet mollis. Morbi vel ipsum vitae tellus porta accumsan quis quis ligula. Proin nulla tellus, mattis et interdum non, convallis ac ipsum. Morbi tellus nisl, tempor condimentum tincidunt a, tincidunt sed tellus. Sed cursus posuere erat a venenatis. Donec vel velit felis, sit amet posuere tortor. Etiam tincidunt orci ut est tincidunt bibendum vel in erat. Nunc dignissim faucibus enim sed rhoncus. Duis quam tellus, iaculis feugiat elementum eu, fermentum malesuada mauris. In metus nibh, sodales eget facilisis a, sollicitudin id lorem. </p>
<p> Donec at eros tortor. Quisque et tellus ipsum, id sodales erat. Ut commodo ornare nisl, ut rhoncus arcu sagittis vel. Aliquam erat volutpat. Nulla non facilisis nunc. Suspendisse potenti. Suspendisse nulla massa, consequat nec tincidunt id, aliquam quis lacus. In hac habitasse platea dictumst. Aliquam sit amet pharetra magna. Praesent nibh est, consequat vitae congue nec, ullamcorper sit amet magna. Etiam sagittis dignissim mauris, eu dapibus leo fringilla eu. Morbi in ipsum lorem. Morbi pharetra sem at justo dictum non imperdiet libero convallis. Etiam sed arcu arcu. Maecenas vulputate, lorem at dignissim consequat, felis mauris pharetra ipsum, in condimentum urna ipsum sit amet lacus. Quisque facilisis fringilla felis et feugiat. Donec vel tincidunt dolor. Praesent congue nunc nec augue ornare vehicula. </p></div>

</div>

Which Produces This:
http://img441.imageshack.us/img441/5760/20100806100716.jpg (http://img441.imageshack.us/i/20100806100716.jpg/)

However, if I do not have content in Col1 - Col 2 shifts to the left, but retains its 70% width.

I want to have Col2 - fill up the area if Col1 is empty, like this:

http://img823.imageshack.us/img823/8774/20100806100800.jpg (http://img823.imageshack.us/i/20100806100800.jpg/)

How do I set it up so that if nothing is in Col1 - col2 will fill up the area?

djr33

08-06-2010, 05:44 PM

This sounds very difficult. Do you also need column 1 to fill 100% if column 2 is empty?

I imagine you could do it like this:
Put a placeholder element of whatever width you'd like in column 1. Then if column 1 has no content, that element should have a width of 0. Then column 2 is free to expand all the way across. So basically column 2 takes the remaining space, either 70% or 100% depending on the content of col1. And col1's width will be determined by that placeholder element.

However, this is NOT just basic CSS.

To create a real solution for this you'd need to use Javascript, I think.

My idea above will only work for one direction, not both, so col1 will not be 100% if col2 is empty...

The best approach here may be to generate the styles based on whether or not there is content, using a serverside language like PHP or using Javascript if you prefer.

coothead

08-07-2010, 10:40 AM

Hi there Wizywyg,

here is a possible javascript solution as suggested by djr33...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
#col1 {
float:left;
background:red;
}
#col2 {
float:left;
background:yellow;
}
.thirty {
width:30%;
}
.seventy {
width:70%;
}
.hundred {
width:100%;
}
.none {
display:none;
}
</style>

<script type="text/javascript">

function init(){
obj1=document.getElementById('col1');
obj2=document.getElementById('col2');

if(obj1.firstChild==null||
obj1.firstChild.nodeType=='3'&&
obj1.firstChild.nextSibling==null){
obj2.className='hundred';

/* these two lines are required by IE6 */

obj1.style.fontSize='0';
obj1.style.background='';
}

if(obj2.firstChild==null||
obj2.firstChild.nodeType=='3'&&
obj2.firstChild.nextSibling==null){
obj1.className='hundred';

/* these two lines are required by IE6 */

obj2.style.fontSize='0';
obj2.style.background='';
}

if(obj1.className==obj2.className=='hundred'){
obj1.className=obj2.className='none';
}
}

if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
</script>

</head>
<body>

<div id="container1">

<div id="col1" class="thirty">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis augue,
elementum nec euismod vel, ultricies a lorem. Duis ac posuere sem. In feugiat
ante in orci ultricies non sagittis felis consectetur.
</p>
</div>

<div id="col2" class="seventy">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi turpis augue,
elementum nec euismod vel, ultricies a lorem. Duis ac posuere sem. In feugiat
ante in orci ultricies non sagittis felis consectetur. In hac habitasse platea
dictumst. Etiam urna magna, tincidunt eu venenatis ac, imperdiet fermentum arcu.
Pellentesque vehicula sollicitudin bibendum. Donec eu eros nibh. Phasellus
ultricies aliquet mollis. Morbi vel ipsum vitae tellus porta accumsan quis quis
ligula. Proin nulla tellus, mattis et interdum non, convallis ac ipsum. Morbi
tellus nisl, tempor condimentum tincidunt a, tincidunt sed tellus. Sed cursus
posuere erat a venenatis. Donec vel velit felis, sit amet posuere tortor. Etiam
tincidunt orci ut est tincidunt bibendum vel in erat. Nunc dignissim faucibus
enim sed rhoncus. Duis quam tellus, iaculis feugiat elementum eu, fermentum
malesuada mauris. In metus nibh, sodales eget facilisis a, sollicitudin id lorem.
</p><p>
Donec at eros tortor. Quisque et tellus ipsum, id sodales erat. Ut commodo ornare
nisl, ut rhoncus arcu sagittis vel. Aliquam erat volutpat. Nulla non facilisis
nunc. Suspendisse potenti. Suspendisse nulla massa, consequat nec tincidunt id,
aliquam quis lacus. In hac habitasse platea dictumst. Aliquam sit amet pharetra
magna. Praesent nibh est, consequat vitae congue nec, ullamcorper sit amet magna.
Etiam sagittis dignissim mauris, eu dapibus leo fringilla eu. Morbi in ipsum
lorem. Morbi pharetra sem at justo dictum non imperdiet libero convallis. Etiam
sed arcu arcu. Maecenas vulputate, lorem at dignissim consequat, felis mauris
pharetra ipsum, in condimentum urna ipsum sit amet lacus. Quisque facilisis
fringilla felis et feugiat. Donec vel tincidunt dolor. Praesent congue nunc nec
augue ornare vehicula.
</p>
</div>

</div>

</body>
</html>

coothead