IE6 shows gaps between rows in 2column layout

Firefox OK

[kiwibrit]

I have a page with a nested div layout.

The template for the page has a css basic container; within that I use 3 other div classes.

In a multi-row, 2 column layout, all is well in Firefox. But in IE6, the ows have a ga between them. Any ideas why, and advice on how to make IE render the same as Firefox? I have included the font styles – but both browsers render the fonts similarly.

css

. mytextBold {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #3333CC;
}

.mytext {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #3333CC;
}

.containerbasic {
position: absolute;
top: 150px;
left: 154px;
width:606px;
background:#FFFFFF
}

.container-hold-w {
clear:left;
left: 154px;
width: 603px;
background:#FFFFFF;
}

.left {
float: left;
width:290px;
margin-left: 0px;
background-color:#FFFFFF;
}

.right {
width:290px;
margin-left: 300px;
background: #FFFFFF;
}

html

<div class="containerbasic">

<div class="container-hold-w">
<div class="left">
<h2 class="mytextBold">This is a headline</h2>
<p class="mytext">This is what I want to say. </p>
</div>

<div class="right " align="right">
<img src="/images/001.JPG" alt="picture" width="230" height="173" border="1">
</div>
</div>

<div class="container-hold-w">
<div class="left">
<h2 class="mytextBold">This is a headline</h2>
<p class="mytext">This is what I want to say. </p>
</div>

<div class="right " align="right">
<img src="/images/ 002.JPG" alt="picture" width="230" height="173" border="1">
</div>
</div>

</div>

[kiwibrit]

Wow. Cracked it - but not sure why it works.

adding

font-size: 0px;

to the overall .containerbasic cracks the problem in IE6.