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:

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:

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:

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...

Code:


<!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

Thread: CSS 2 column Fluid Layout Problem

Thread Tools

Search Thread

CSS 2 column Fluid Layout Problem

Bookmarks

Bookmarks

Posting Permissions