<div> height problem in IE6

Hey guys,

I am working on the following web page but am having problems with the height of the "Main Content Area" in IE6... FF and IE7 are OK.

http://islandrobot.com/irobo/

The problem is that the white area gains about 20px at the bottom when I add the h1 tag to the #mainbox div.

Relevant CSS:

#outerbox {
	border: #4e8e94 10px solid;
	width: 800px;
	height: 600px;
	background-color: #fff;
	position: absolute;
	top: 80px;
	left: 50%;
	margin-left: -410px;
}

#outerbox #mainbox {

}

#outerbox #sidebox {
	width:200px;
	height:100%;
	background-color:#333;
	float:right;
}

h1 {
	font: 14px Verdana,Arial,sans-serif;
	color: #000;
	text-align: center;
}

h2 {
	font: 12px Verdana,Arial,sans-serif;
	color: #fff;
	text-align: center;
}

Code (markup):

Relevant HTML:

<div id="outerbox">
	<div id="sidebox">
		<h2>SideBar</h2>
	</div>
	<div id="mainbox">
		<h1>Main Content Area</h1>
	</div>
</div>

Code (markup):

 

just add a conditional IE statement for IE 6 making the height of the main div 20px less tall

something like this (not sure if the syntax is right for the IF)

[IF IE6]
<style="text/css" media="screen">
#outerbox { 
    height: 480px 
}
</style>
[ENDIF]

HTML:

p.s. what does this do?

 

Well the problem with that is that the extra 20px of space that is created causes a gap below the SideBar (the sidebar should meet flush with the bottom border). If I shrink the mainbox for IE6 by 20px, the sidebar will also shrink by 20px and the gap will remain.

margin-left: -410px; is part of centering the whole box. It is absolutely positioned left:50% which moves the left margin to the center of the page, then margin-left: -410px moves the box half its width (its 820px wide when you factor in the border) to the left so that 50% now falls in the center of the box. hope that makes sense.

 

I got the solution.

apply margin:0; padding:0; to the h1 tag and that solves the problem.

 

i was gonna mention something like that also, normally i start out most css docs with:

* { margin: 0; padding: 0 }

which removes margin and padding from all tags