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