min-height problem both in IE8/FF 3.5 beta

minimum of 100% of page height

[dbarasuk]

Hello all
I have a page that must always have 100% of browser window height with a footer div always at the bottom of the window at least.

However, the footer is indeed at the bottom only in FF. in IE explorer, it comes somewhere in the middle after the content when there is no enough content on the page. Both in IE and FF, the page displays scrolling bars at the right side when there is no enough content to show on the page.

This is the code:
<div id="container">
<div id="wrapper">
<div id="menu">
<ul>
<li><a>Element One</a></li>
<li><a>Element Two</a></li>
<li><a>Element Three</a></li>
<li><a>Element Four</a></li>
<li><a>Element Five</a></li>
<li><a>Element six</a></li>
<li><a>Element Seven</a></li>
</ul>
</div>
<div id="content">
<p>Paragraph content</p>
<p>Another Paragraph content</p>
</div>
</div>
</div>

/*CSS code*/

xhtml,body{background-color:#dea;height:100%; margin:0;}

body{font: 100% "Trebuchet MS" geneva,Arial, verdana, tahoma, sans-serif; color: #5A1C46; margin:10px 0; text-align:center;}

div#container{width:750px; margin:0 auto; padding:0 10; background-color:white; border: 2px solid #ab4; text-align:left; min-height:100%; position:relative;}

div#wrapper{position:relative; width:730px; overflow:auto; margin:10 auto 50px auto ; padding:auto auto 50px auto;}

div#header{height:30%; overflow:hidden; background: url (../images/abp.png) ; }

div#menu{width:170px; background-color:inherit; float:left; position:absolute; left:0px; margin-bottom:50px; border:1px outset #ab4;}

div#content{background-color:white; position:relative; float :right; width:540px;}

div#footer{height:50px; background-color:maroon; color:#fedaeb; text-align:center; position:absolute; font-size:12px; width:750px; bottom:0; left:0; clear:both;}

Although I give 750px width to div#footer which the total width of its parent div#container, i still see a 10px margin on the left and right of div#footer because of the 10px padding of the parent div#container. This means div#footer ends up taking only 730px despite the 750px given. Consequently, the maroon color of div#footer leaves a 10px white color coming from the one of its parent. I would like div#footer to occupy the full width of div#container and therefore hide the white color of its parent which causes a bad appearance. HOW CAN I DO THAT?

A second problem comes from the display of div#wrapper when there is no enough content on it. What happens is the display of a scrolling bar both in IE 8 and Firefox 3.5 Beta at the right of it and i must scroll down to see the bottom of div#menu.
In IE, the display of div#footer is even more problematic because it does not remain at the bottom of the browser window as programmed. It stays at the bottom of the browser however in FF.

HOW CAN I SUPPRESS THAT SCROLLING BAR AND KEEP div#footer at the bottom?

Thanks alot.

[swa66]

First try validating your CSS, there's quite a few syntax errors in it.

The scrolling bar is due to the border that sits outside of the 100% height container.

The box model is also somehting important to grasp fully. And IE isn't making that job easy by implementing the wrong one every so often.

I'll look at posting a step-by step example of how to get this right as it's rather tricky to know what and why you can and should do to get something that's doing what you seek.
This question pops up every so often: better get a reference post as they take a bit of time to create. Remind me in a sticky if I forget to do this in the next few days -gotta run now-.

[dbarasuk]

If i remove the container border, the image inside the header section becomes centered instead of being to the left.

Any idea, please of how to remove that scrolling bar of the wrapper.

th u.