ansaurus

Question

Answer 1

+1 A:

Perhaps Multi-Column Layouts Climb Out of the Box is what you're looking for?

strager 2009-04-26 17:24:40

Answer 2

A:

I think your solution would be to wrap your content container and your sidebar in a parent containing div. Float your sidebar to the left and give it the background image. Create a wide margin at least the width of your sidebar for your content container. Add clearing a float hack to make it all work.

apphacker 2009-04-26 17:29:57

Answer 3

+1 A:

Clearly you are looking for the Faux columns technique :-)

By how the height-property is calculated, you cant set height: 100% inside something that has auto-heigh.

Arve Systad 2009-04-26 17:32:38

Using the faux columns technique was the closest I was able to get. The problems I ran into were that I couldn't make the sidebar overlap on top of the navigation bar and I couldn't figure out how to put the "sidebar bottom" image always at the bottom of the sidebar.

Jon 2009-04-26 17:55:03

If you have one main-container, in which you have the background for the entire page, you can use the sidebar-bottom-image like this: `background: url(blabla) no-repeat bottom;`. Making the sidebar overlap on top of the navigation bar could also be solved by "emulating" the sidebar in the nav-bar-background. If this makes no sense to you, would you stick up a sketch of what you are trying to achieve? :)

Arve Systad 2009-04-26 22:15:36

put teh sidebar bottom image in the site footer but use position relative or absolute, or neagative top margin, tp lift it up so it appears on top of the sidebar.

wheresrhys 2009-04-27 00:45:20

Answer 4

A:

I have run into this issue several times on different projects, but I have found a solution that works for me. You have to use four div tags - one that contains the sidebar, the main content, and a footer.

First, style the elements in your stylesheet:

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

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

I wrote a more in-depth blog post about this at http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container. Please let me know if you have any questions. Hope this helps!

Libby 2010-08-22 21:21:09

ansaurus

tags:

views:

answers:

CSS Sidebar Height 100%

related questions