CSS fluid layout with 2 columms
- by Sune
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;
}
