Page 1 of 1
[SOLVED] Make a column 100% height
Posted: Thu Dec 09, 2010 12:45 pm
by 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
Re: Make a column 100% height
Posted: Thu Dec 09, 2010 12:49 pm
by 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>
Re: Make a column 100% height
Posted: Thu Dec 09, 2010 3:57 pm
by 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.
Re: [SOLVED] Make a column 100% height
Posted: Thu Dec 09, 2010 6:41 pm
by Dr.CSS
That look is where I just use an image, no extra voodoo to get a column 100%...