I am trying to figure out why IE is messing this simple layout. It has to be something very simple, but I can't find it.

The site:
http://www.altoonafirefighters.org/test/temp.php

Firefox is displaying it correctly, but IE 6 is messing up my margins for some reason. I'm specifying 10px left margin on the mainNav div, and IE 6 is adding 20px margin?

The layout.css:

/* Main Layout Styles */
#header {
	width: 980px;
	margin-bottom: 20px;
	border: 1px solid silver;
}

#wrapper {
	width: 980px;
}

#content {
	width: 760px;
	margin-bottom: 20px;
	float: right;
}

#mainContent {
	width: 540px;
	float: left;
	border: 1px solid silver;
}

#rightColumn {
	width: 190px;
	float: right;
	border: 1px solid silver;
}

#mainNav {
	width: 190px;
	float: left;
	margin: 0 0 20px 10px;
	border: 1px solid silver;
}

#footer {
	clear: both;
	border: 1px solid silver;
}

Easy answer - doubled-float margin bug in IE.

This bug occurs when you have an element floated and then apply a margin in the same direction as the float.

In your case, you have #mainNav floated left then you apply a 10px left margin to it. IE DOUBLES that margin to 20px ! Same happens if you float right.

The fix ? Add height: 1% to the #mainNav rules. However, you should put that in in a 'iefixes.css' file (or whatever you want to name it) and add in the necessary conditional comment to make IE obey this additional rule. That leaves your main cSS file free of hacks that other browsers don't need.

Thanks for the reply. I had already solved it though. I should have known it was an IE bug. But it was the last thing I checked for some reason.

The solution I used is found here:
http://www.positioniseverything.net/...ed-margin.html

It involves applying a { display: inline; } rule to all the affected divs.

Big John's site is my go-to for IE bug fixing

You can try by putting "display:inline" in the div mainnav

I think it may work