Table layout using div elements

Question

I am wondering how to create a table such as a layout that works only with div elements. I read a lot about display and float style attributes, and I think this code should contain the contents of the layout as I want, but I see a table with a second row, moved one position below.

I expect to see:

 left1 right1 left2 right2 

but i see

 left1 left2 right1 right2 

Here is my CSS

 .big { display: inline-block; } .small { display: block; } .left { display: inline; } .right { display: inline; float: right; } 

And here is my html file:

 <div class="big"> <div class="small"> <div class="left">left1</div> <div class="right">right1</div> </div> <div class="small"> <div class="left">left2</div> <div class="right">right2</div> </div> 

I managed to create a table (add the rule width: 100px to the width: 100px selector), but I do not want to specify the width of my DIV elements, because they can have different widths.

thanks

Answer 1

If this is the correct table format, it is advisable to use an html table. If this is not a true table layout, here is what you need in your CSS if you want to keep the HTML intact:

 .small {float:left; clear: both;} .left {float:left: clear: both;} .right {float:left;} 

"clear: both" looks like a carriage return (ding! for all of you with typewriter memory); "float: left" places material horizontally next to each other instead of stacking boxes (such as divs) vertically.

For my own CSS tabular layouts, I use only two classes: row and column, as follows:

 /* Standard CSS for div tables. By Tom Haws * Overview: * 1. a row is a box element that wants all its children to be * arranged in a (horizontal) row * and is itself a new line rather than a continuation of a line. * 2. a column is a box element that wants all its children to be * arranged in a (vertical) column * and is itself a continuation of a line unless it is * the first column in a row. * * */ /* Any child of a row AND any column class that is anything but first-child * represents another column continuing the same row * */ .row>*, .column { float: left; } /* Every first child of a row and every column that is a first child of any parent * represents a new row (first column) * */ .row>*:first-child, .column:first-child { clear: both; float: left; } /* All rows and all children of a column are a new line. * */ .row, .column>* { clear: both; float: left; } 

Here is how I would do your little example:

 <div class="row"> <div>left1</div> <div>right1</div> </div> <div class="row"> <div>left2</div> <div>right2</div> </div> 

Feel free to ask any comments about the nuances of CSS markup and what it does.

Answer 2

Something like that. http://jsfiddle.net/V4GeD/

Note that float: right will completely move the element to the right. You can also use float on the left with some fields.

I deleted one <div class="small"> from your html, I did not see any reason to store it :-).

Answer 3

I found that removing the float left with .small makes it more browser compatible.

  .small {clear: both;} .left {float:left: clear: both;} .right {float:left;}