Float Drops in IE6

[Ascendancy]

I have a layout where there are two div's that float, one on the left and one on the right. Then I have a center div that is pushed into the center by setting the left and right margins to push it into the middle of the two. However, in IE6, my center DIV(the one that is pushed with the two margins) is not pushed enough and drops below my left float. If anybody needs me to post the code I will, if that helps.

[KDLA]

Add this to your code:

* {margin: 0; padding: 0;}

I've noticed that IE adds some padding to floats. This usually counteracts it. What it does is negates any and all default margins & padding. You'll probably need to add them to the elements you were using that relied upon the default. But, it's much easier to start with a blank slate, than trying to figure out some weird and unknown application. ;)

BTW - didn't your avatar use to be the Adobe feather?

KDLA

[Ascendancy]

Well I already have the * with a margin and padding of 0, but should i specifically define it with every main element in the CSS?

And yes it did used to be the feather, why do you ask?

[KDLA]

No. The * is a wildcard, encompassing everything.
Hmmm.... if that didn't work, it could be some padding/margin issue. I sometimes interchange them to get things to work in IE. Might be best to see some of your code.

Re: Feather
Just had one of those weird moments where I saw the avatar and didn't recognize you. Usually, when I saw the feather, I knew it was you without reading your name. Yes -- weird. :D

[Ascendancy]

Well I should probably change it back to the feather then, huh?
Here are the main parts to my CSS.


* {
margin: 0;
padding: 0;
}

html, body {
min-height:100%;
height:100%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";
voice-family:inherit;
font-size:small;
}

html>body {
font-size:small;
height:auto;
}

* html .main {
height: 100%;
}


And here are the actual DIV's


#main {
height: auto;
border: 1px solid #000000;
background-color: #a6d5ff;
width: 800px;
margin: 0 auto;
}

#content {
padding: 2px;
margin: 5px 150px 0 150px;
min-height: 850px;
}

#main_content {
text-align: left;
border: 1px solid #000000;
background-color: #028bff;
font-family: Verdana, Arial, Tahoma, sans-serif;
color: #ffffff;
padding-left: 4px;
height: auto;
margin-right: 4px;
margin-left: 1px;
}

#left {
float: left;
width: 140px;
height: auto;
text-align: left;
border: 1px solid #000000;
background-color: #028bff;
margin-left: 7px;
margin-top: 7px;
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 11px;
color: #ffffff;
min-height: 825px;
}

#right {
float: right;
width: 140px;
height: auto;
text-align: left;
border: 1px solid #000000;
background-color: #028bff;
margin-right: 7px;
margin-top: 7px;
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 11px;
color: #ffffff;
min-height: 825px;
}


Left and Right refer to the left and right floats, Main is the main body where the floats and the center division are held, it is basically just a box set 800px wide and centered. Then there is the Content, which is the centered division itself, and main_content is the stuff inside the division(text, images, etc).

I know it's a lot to look at when first glancing at it, but any help would be greatly appreciated.