Results 1 to 3 of 3

Thread: CSS 2 column Fluid Layout Problem

  1. #1
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS 2 column Fluid Layout Problem

    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?

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    689
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •