float:left, fails to work.

hi! I had 3 div class=”columndiv” with 3 images going down, so 3×3 grid. I decided to change the layout to 2 images on the left, and 2 on the right, with 1 big image in the middle, yet now the float fails to work for the last column. Instead ie decides to place them below eachother (in firefox it works).

HTML

[CODE]
<div class=”columndiv”>
<div class=”menubox”>
<img src=”menuimg.jpg” class=”menuimg” alt=”Menu” />
</div>
<div class=”spacebox”></div>
<div class=”menubox”>
<img src=”menuimg.jpg” class=”menuimg” alt=”Menu” />
</div>
</div>

<div class=”columndiv”>
<div class=”menucenterimg”>
<img src=”dane.jpg” alt=”Dane McCalam, photographer” />
</div>
</div>

<div class=”columndiv”>
<div class=”menubox”>
<img src=”menuimg.jpg” class=”menuimg” alt=”Menu” />
</div>
<div class=”spacebox”></div>
<div class=”menubox”>
<img src=”menuimg.jpg” class=”menuimg” alt=”Menu” />
</div>
</div>
[/CODE]

CSS

[CODE]
div.columndiv {
float:left;
}

div.breakdiv
{
clear.both;
}

div.menubox {
width:150px;
height:150px;
margin:20px;
border:3px solid #666666;
}

div.menucenterimg {
height:600;
}

div.spacebox {
height:260px;
}
[/CODE]

Also, what is the standard/best naming convention for classes/ids?

Also in #CSS _↴