float:left, fails to work.

[alexpnd]

hi! I had 3 div class="columndiv" with 3 images going down, so 3x3 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

<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>


CSS

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;
}


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

[Tancredi]

you have a lot of divs in the markup. Maybe create a container div and apply an id selector to it, set its width to 153px.