CSS 100% height doesn’t stretch 100% when browser…

[Illogical]

I got a very strange problem and it just occurred after adding some content in my WordPress layout build.

Before the added 2 extra lines my #main (content) stretched 100% on all pages. Now with the 2 extra lines there is a white space below the #wrap and above the #footer. But as soon as I hit CTRL+- to zoom out, that white space is cleared and the #main stretches again for 100%, like it did before in normal and zoomed mode. Normally when in zoomed mode the stretch is 100%, it always is like that and I had nothing to worry about. It really bugs me and I have tried to add in maybe some missing min-height 100%, but no result.

* 			{	margin: 0;

padding: 0;	}



a			{ 	color: #000;

text-decoration: none;	}



body		{ 	background: url(style/images/backgrnd.png) top center #d9d9d9 repeat-x;

color: #FFF;

font-size: 11px;

font-family: Trebuchet MS;

height: 100%;	}



html		{ 	height: 100%;	}



.clear		{ 	clear: both;	}



img, div 	{	behavior: url(iepngfix.htc);	}



#wrap			{	width: 980px;

background: url(style/images/backgrnd-wrap2.png);

margin: 0 auto;

height: 100%;

min-height: 100%;	}



body > #wrap 	{	height: auto; min-height: 100%;	}



#header-wrap	{	background-color: #123456;

width: 980px;

margin: 0 auto;

height: 220px;	}



#footer			{	background: url(style/images/backgrnd-footer.png);

position: relative;

margin-top: -75px;

height: 75px;

width: 980px;

margin: 0 auto;

clear: both;	}



#main 			{	float: left;

width: 650px;

padding: 10px;

overflow: auto;

padding-bottom: 75px;	}

(link: http://db.illogical.nl/about/)

And yes, I use faux-column for the sidebar. Couldn’t get it working the real way, and faux-column does the trick, because the actual needed stretch is only for the background really.

[Author]

Posts