Div layout in rows?

Hope someone can show me how to set up divs to display like a row of tables

What I am hoping to achieve is to have the exact coloured layout as in the pic in the link but to duplicate this same layout with a number of rows with a break for each row.

In the example the second row with grey block layers to show what I want.

This must also be IE6 friendly


Any suggestions :slight_smile:


I suggest three approaches

  1. have a row div and inside cell divs
    set CSS width and height for cell divs. Experiment with that.

  2. use cell divs, set HTML class property, style that class with CSS and set “float:right”, then use either a different class on the last cell in a row or have span tag with this other class where the row should end, style it “clear:left” and the divs should align like in the picture.

3) oh yeah, you can also have container div, style the width and the cell divs will align by their width (like streching browser window while contents self-align). But this might not be as useful because it requires a set width and depending on cell width one row could have one cell, while another fits four cell divs. It has quite stiff feel to it.

Hope that gets you what you’re after.

Wanting it to be IE6/7 friendly makes it far more complicated than it would be otherwise since those two browsers still don’t fully support CSS 2.1 and the display:table-row and display:table-cell commands that would do exactly what you need are two of the ones those two browsers don’t recognise.

To be able to position cells alongside one another in those browsers you’ll need to give each cell a width and then use float:left