IE6 DIV FLOAT:LEFT – is it really so hard?

Hiya. Ok, so I have 2 containers on the page:

#ltcon01 {
float:left;
width: 345px;
}

#rtcon01 {
width: 345px;
margin-left: 355px;
}

Their CSS attributes are further defined in these classes:

.convar {
position: relative;
}

.padding {
position: relative;
border: 1px solid #CCC;
padding: 8px 10px 10px;
}

implemented as such:

<div class=”convar” id=”ltcon01″>

<div class=”padding” id=”l01″>content here</div>
<div class=”padding” id=”l02″>content here</div>
</div> <!– end ltcon01 –>

<div class=”convar” id=”rtcon01″>
<div class=”padding” id=”r01″>content</div>
</div> <!– end right cont 01 –>

the containers display as they should – that is, next to each other – their tops with the same vertical position in FF, Opera and IE7. Alas in IE6, the right container begins at the correct horizontal coordinates, due to its padding. But, its vertical position is set right at the bottom of the first container. If I make rtcon float:right, it doesn’t seem to make any difference. How on earth am I going to get my layout to work in IE6?

Any help much appreciated!

Z

Also in #CSS _↴