Float left property for <div> not working in firefox

[Rajicet]

Hi,
In IE, two rows and two columns in each row are coming correctly. But in firfox, it is coming as 3 columns in first row and 1 column in second row. The code is given below.Any solution for this problem ? please help.

<div style="width:60%" align="left">
<div>
<div align="left" style="float: left;width:30%;">row1 column1</div>
<div align="left" style="float: left;width:30%;">row1 column2</div>
</div>
</div>
<div style="width:80%" align="left">
<div>
<div align="left" style="float: left;width:30%;">row2 column1</div>
<div align="left" style="float: left;width:30%;">row2 column2</div>
</div>
</div>

[gunnarflax]

Align on div is deprecated and should not be used. Instead use: style="float: ..."

If you can't get it to show correctly after changing align then just use float:left on the left column and float:right on the right column. It can also be a problem with the width of the div's according to the container. Try adding a px or two :)

[Rajicet]

For the second row, we can use Clear property.

<div style="width:60%;clear:both" align="left">
<div>
<div align="left" style="float: left;width:30%;">row1 column1</div>
<div align="left" style="float: left;width:30%;">row1 column2</div>
</div>
</div>
<div style="width:80%" align="left">
<div>
<div align="left" style="float: left;width:30%;">row2 column1</div>
<div align="left" style="float: left;width:30%;">row2 column2</div>
</div>
</div>