[SOLVED] Make a column 100% height

[handcoded]

Hi

I'm having problems trying to set my sidebar to 100% height and wondered if someone could help me out.

http://www.richardjordan.biz

Thanks

[M@rtijn]

Maybe this helps: http://www.alistapart.com/articles/fauxcolumns/

Or another option (which works for me as well) with the use of four div tags - one that contains the sidebar, the main content, and a footer.

First, style the elements in your stylesheet:

Code: Select all

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
height: 100%;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
height: 100%;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.

Then, simply set up your web page like this:

Code: Select all

<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>

[handcoded]

Hi

I've played around with the code above and practically re-written the website but I still can't understand why I cannot make my left column 100% in height.
I've tried wrapper classes and id's around the content and specifying these as 100% but with no joy. Could someone please take a look at my code.

www.richardjordan.biz

regards,
Richard

Update
I solved my problem by setting the background colour for the background container.

[Dr.CSS]

That look is where I just use an image, no extra voodoo to get a column 100%...