Rendering Div in Firefox issue

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

You could render something like

<div style="clear:both"> Row1,Column1 </div>
<div>  Row 1,Column2   
    <div> Content 1 n Row1,Column2 </div>  
    <div> Content 1 in Row1,Column2 </div>
</div>

Answer 2

This is the way floats are supposed to work, IE is doing it wrong. The easiest way to fix it is to wrap all these elements inside of another div, then set the height of the 'floated' element to 100%.

Edit: fixed http://jsbin.com/upane

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

This is assuming what you want is something like this:

|--------|-----------|
|        |-----------|
|        |-----------|

Answer 3

What you are trying to do is not going to work.

If you simply can't use a table element, then you're going to need to used fix height and widths for your "cells" or your rows and columns in your web application will never line up.

If you want TABULAR data with columns and rows, use tables. That's what they are for. (an article from alistapart which should be authoritative to you, do a search on "Are you saying that HTML tables are dead?")

Answer 4

<div style="width: 100%; overflow: hidden;">
    <div style="float: left;">Row1, Column1</div>
    <div style="float: right;">
     Row1, Column2
     <div>Content 1 in Row1,Column2</div>
     <div>Content 1 in Row1,Column2</div>
    </div>
</div>

Answer 5

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>