PDA

View Full Version : making a column go to the bottom of parent div


justlikethecaptain
04-26-2009, 04:21 PM
I am designing a website in which there is a sidebar within the main content div. It's floated right, and the idea is that it is supposed to reach all the way from top to bottom of the div.

How can I get it to reach all the way to the bottom of the parent div without going further? No matter what I do it seems to always stop short of the bottom or else overrun the content div.

I've tried setting height to 100%, and that doesn't seem to work...


Thank you for your help!

DWcourse
04-26-2009, 05:30 PM
Use this page structure:

<body>
<div id="holder">
<div id="content">
<div id="sidebar"></div>
</div>
<div class="clear"></div>
</div>
</body>

Use a vertically tiled background image in holder to provide the colors for the columns. Leave content and sidebar transparent.

Set the CSS clear property of the class .clear to both.

Holder (and the background image) will grow to the length of the longest column.