css vertical align help

Question

I'm using a strict doctype and cannot get one of my divs aligned to the bottom. I'd like to specify a 100% height on the parent container and then push the inner container to the floor of the parent. How is this done using a strict doctype?

This is the parent: -- Works as expected. At 100% height

#content_left {
vertical-align:top;
padding:0;
margin:0;
min-width:195px;
color:#fff;
height:100%;
}

This is the inner div: doesnt work

.sidebarmenu {
position:relative;
bottom:0;
height:100%;
border:1px solid red;
}

Answer 1

Discussing layout issues in text can be tricky, but note that you’ve said you want a <div> aligned to the bottom, but you’ve not said to the bottom of what.

I think you mean the bottom of the browser window. Unfortunately, you can’t really do this in CSS: the root element is always as tall as its content requires, and not as tall as the browser window (if I remember correctly).

Answer 2

I think you would need to use absolute positioning and specify bottom: 0:

#content {
    position: absolute;
    bottom: 0;
}

Answer 3

I'd suggest trying:

#content {position:relative;bottom:0;}