ie 6 margin problems

[theflyingburito]

Hey there, I am working on a website currently that looks fine on ie7 and 8 aswell as firefox. However in ie6 the margins for the "mainContent" div that is floating right is shoved up right next to my left floating "sideNavigation" div. The set "left-margin" for side navigation is displaying correctly, just the margins on "mainContent" are not adhering.

I am attaching the url http://www.realisticwebsolutions.com/mytestsuccess/

also here is the css for the two elements

#sideNavigation {
	margin: 10px 0 0 15px;
	width: 140px;
	height: 370px;
	float: left;
	border: thin solid #9999CC;
}

#mainContent {
	float: right;
	height: 100%;
	width: 548px;
	border: thin solid #9999cc;
	margin-right: 30px;
	padding: 15px;
	margin-top: 10px;
}

Thanks in advance for any input!

[androsynth]

This could be a side effect of the much hated double-float margin bug in IE6:

http://positioniseverything.net/expl...ed-margin.html

IE6 doubles the margins that are applied to the same side as the float.

[Rayzur]

Yes, your code has margins in the same direction as the floats.
Add display:inline; to both of those selectors for IE6.