CODEWITHSUNDEEP
css
Ben
Ben

Reputation: 743

Rendering Div in Firefox issue

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

Upvotes: 0

Views: 453

Answers (6)

Sekhat
Sekhat

Reputation: 4479

The problem and the solution http://img190.imageshack.us/img190/7959/whatshappening.png

hence resulting code

<html>
<head>
</head>
<body>
    <div style="float:left; background: red;">
        Row 1 column 1
    </div>
    <div style="background: blue;margin-left: 200px;">
        <p>Row 1 column 2</p>
        <p>fdsfsfsdfsdfsdfsdfs</p>
    </div>
</body>
</html>

Upvotes: 0

Emily
Emily

Reputation: 10088

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>

Upvotes: 0

cgp
cgp

Reputation: 41381

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?")

Upvotes: 5

user4903
user4903

Reputation: 

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

Upvotes: 1

TJ L
TJ L

Reputation: 24452

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:

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

Upvotes: 0

Paulo Santos
Paulo Santos

Reputation: 11567

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>

Upvotes: 0

Related Questions