CSS fluid layout with 2 columms

Posted by Sune on Stack Overflow See other posts from Stack Overflow or by Sune
Published on 2010-03-26T09:13:45Z Indexed on 2010/03/26 9:23 UTC
Read the original article Hit count: 589

Filed under:
|
|

Ive building a website with a fluid layout. The structure is:

 <div id="maincontainer">

    <div id="topsection">
       <div class="innertube"><h1>CSS Liquid Layout #2.2- (Fluid-Fixed)</h1></div>
    </div>

    <div id="contentwrapper">
       <div id="contentcolumn">
          <div class="innertube"><b>Content Column:</b></div>
       </div>
    </div>

    <div id="rightcolumn">
         <div class="innertube"><b>Right Column:  <em>200px</em></b> 
         <script type="text/javascript">filltext(14);</script></div>
    </div>

    <div id="footer"><a href="#">Some footer</a></div>

</div>

My problem is when my contentcolumm grows(height) I cant get my right columm too grow with. I can fix the problem with javascript where I measure out the contentcolumn height and set the same height on my rightcolumm. But Im wondering if there are any better css solution.

here is clip from my css:

#contentwrapper{
    float: left;
    width: 100%;
    background:#FF7000;
}

#contentcolumn{
    margin-right: 200px; 
}

#rightcolumn{
    float: left;
    width: 200px; margin-left: -200px; 
    background: #BBBBBB;
}

© Stack Overflow or respective owner

Related posts about fluid

Related posts about layout