Question

I want to render something like this in firefox

<div style="float:left"> Row1,Column1 </div>
<div>
  Row 1,Column2 
  <div> Content 1 n Row1,Column2 </div>
  <div> Content 2 in Row1,Column2 </div>
</div>

In IE it works fine but in firefox what happens is the Row1,column2 doesnt stack one below the other.

[Content2 in Row1,Column2] goes below the content [Row1,Column1].

Can someone help me figure this out.

I dont want to use Tables. Cant use them.

Thanks,
Ben

[Update]this is what I want to achieve i.e after rendering the div’s it should look like this.

[Row1,Column1] [Content 1 n Row1,Column2]
               [Content 2 in Row1,Column2]

In IE it works but in firefox it renders like this

[Row1,Column1] [Content 1 n Row1,Column2]
               [Content 2 in Row1,Column2 dsfdsf sdfdsf

fsdfdsfdffsf]

This is the issue

I cant copy the css here but this is what it comes down to in the end

Answer 1

Float your second column left and give it a left margin.

<div style="float:left"> Row1,Column1 </div>
<div style="float:left;margin-left:100px;">
  Row 1,Column2
  <div> Content 1 n Row1,Column2 </div>
  <div> Content 1 in Row1,Column2 </div>
</div>