ie6 float bug

[sloLearner]

Hi - There's a particular bug that I keep on getting in IE6, which doesn't seem to adhere to the well known bugs normally documented (ie haslayout, float double-margin etc).

I have a container div ('indexCenterContainer'), with a two main divs inside ('indexCenterLeftContainer' and 'indexCenterRight'). 'indexCenterLeftContainer' is floated left, and 'indexCenterRight' is a static element, pushed to the right by a 'margin-left' property (see CSS below). The two divs also contain a couple of further divs that don't have further positioning or layout properties, just text-formatting, background-color, etc.

Ideally, this should just present the main divs 'indexCenterLeftContainer' and 'indexCenterRight' side by side (which it does in FF and IE7). IE6 however pushes the static div 'indexCenterRight' so that it begins exactly below the floated div. The container div definitely has enough room for both divs (it's width just being 100%).

Is there some obvious bug I'm missing? Btw, this has been validated; has double-margin float bug hacks, and also haslayout hacks already included... tho to no avail!

I have the following HTML...


<div id="indexCenterContainer">
<div id="indexCenterLeftContainer">

TEXT... IMAGE...

<div id="indexLeftLowerText">

TEXT

</div>

</div>

<div id="indexCenterRight">

<div id="indexRightLowerText">

TEXT

</div>

</div>

</div>


and the relevant css to match with it is... (the divs not mentioned here are simply affecting background-color and font-size)


#indexCenterLeftContainer
{
width:300px;
float:left;
display:inline;
margin-right:20px;
}

#indexCenterRight
{
margin-left:320px;
}


Thanks for any suggestions/help!!
:D

Nick

[Centauri]

I would first suggest removing the 20px right margin from #indexCenterLeftContainer - it is not needed and can cause problems with IE6's 3px jog bug.