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: 691
        
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