Log in

View Full Version : Sidebar spanning height difficulties


JaxShores
08-27-2006, 10:44 PM
Hey guys, I was wondering if you could enlighten me on the right way to do this.

http://patch.cacrew.com

On this CSS blog I'm designing for a friend, I'm trying to get the leafy sidebar to span the height of the content. My CSS for the property is:

#sidebar {
float: left;
background: #589f45 url(images/sidebar.gif) repeat-y;
height: 100%;
width: 44px;
}

I have a feeling that the height: 100% property is causing the problem. When you look at the site, the sidebar repeats exactly one page-length and stops.

The HTML markup for the page:

<div id="sidebar"></div>
<div id="header"></div>
<div id="topbar"></div>
<div id="blog">
Test<br />...
</div>
<div id="footer"></div>

All of the other IDs are floated left. Do you guys have any suggestions? Any help would be greatly appreciated. Thanks for looking!
blm126
08-27-2006, 11:31 PM
I'm confused it looks fine to me.
Twey
08-27-2006, 11:47 PM
I have a feeling that the height: 100% property is causing the problem.100% means 100% of the containing element. 100% of the <body> element's height is the height of the browser viewport. You're looking for equal-height columns. There are a few methods of achieving this; the most popular is Faux Columns (http://www.alistapart.com/articles/fauxcolumns/), which uses background images to fake the second column, but my favourite is PIE's equal columns method (http://www.positioniseverything.net/articles/onetruelayout/equalheight), which is a lot more flexible. Both have their advantages and disadvantages.
JaxShores
08-28-2006, 06:44 AM
Your second technique worked great, thanks a lot!