<div> position:absolute; bottom: 0; not working as expected in IE7

css, html, internet-explorer-7, scroll

Solution

"The `top` property overrides the `bottom` property..." https://developer.mozilla.org/en-US/docs/CSS/bottom

Change `top` to `auto` instead of `0px`:

div#middlenav
{
    position: absolute;
    left: 250px;
    right: 350px;
    top: auto;
    bottom: 0px;
}

That should fix the bottom positioning. Remember, if `#middlenav` is positioned absolutely, it will be relative to whichever parent element has `position:absolute;` or `position:relative;`. If `#middlenav` has no parent elements that are positioned, it will be relative to `<body>`.

I'm not sure why you have `#courselist` absolutely positioned; since it is inside of `#middlenav` I would think you could leave it static or position it relatively. But regardless of what you do, I think you need a height set on `#courselist` or `#middlenav`. The default value of height is auto, so there won't be a scrollbar because the element will expand to fit its content.

I know this question was asked 3 years ago, but I'm posting this for other people who may have a problem with CSS positioning. Cheers!

Problem

My site, a course catalog tool for universities, has a center pane that contains a dynamically updated list of classes. In Firefox, Opera, and Chrome, the center pane has the intended scrolling behavior: when the class list exceeds the height, the center pane has a scroll bar. IE, however, only shows this bar when the height is explicitly set. Without using JavaScript to reset the center pane height on resize, how can I force Internet Explorer to show the scroll bar? The center pane: ``` <div id="middlenav"> <div id="middleheader"></div> <div id="courselist"></div> </div> ``` and its CSS: ``` div#middlenav { position: absolute; left: 250px; right: 350px; top: 0px; bottom: 0px; } div#courselist { overflow: auto; position: absolute; top: 55px; bottom: 0px; width: 100%; } ``` It looks like the center pane isn't obeying the `bottom: 0px;` statement, and is expanding to the full height of the contained `#courselist`. I tried `body { height: 100% }` but that didn't fix it either.

Original source