Please help me move from tables to divs in a clear way?

November 28, 2006 2:17 PM

How do I do multiple sets of multi-column divs w/ CSS inside other multi-column divs? More details in first comment.

This issue has bugged me for a while, and I've usually resorted to table to get away from CSS columnar hideousness

Here's a graphic depiction of what I want to accomplish.

I've managed to make A, B, C, and the unlabelled footer happen with directions I've found using float (left and right, and clearing for the footer), but when I try to use the similar structure for D-H, it fails horribly.

What I eventually want to accomplish is that d-h could be a large (and not previously defined) number of entries, so any solution should take that into account.

Thanks!

posted by Kickstart70 to technology (9 comments total)

Add a style="clear:both;float:left;" to DIVs D1, E1, F1... Or else insert a linebreak (or other throwaway tag) with a clear attribute at the end of each row.

If you don't mind my saying, if rows D, E, F... are displaying organized data in gridded format, it's perfectly legal to use tables. that's what they're for.
posted by ardgedee at 2:41 PM on November 28, 2006

The problem is that CSS specifies that the "clear" property moves a block down past not only all floating block in its parent div but past all earlier floating blocks in the documnt. So if E1 is clear="left" or clear="both" it gets moved down past the end of B which is float="left". Yes, this is retarded.

You could try removing the "clear" property from E1, F1, &c. and putting an empty div with width="100%" before each. Or, use tables.
posted by nicwolff at 2:50 PM on November 28, 2006

I know someone's going to yell at me for this , but unless you're trying to impress someone (or have some other good reason), use tables for d-h.
posted by cillit bang at 3:10 PM on November 28, 2006

On review: You can also create one-row-tall DIVs D, E, F... and put in each DIVs 1, 2, 3.
posted by ardgedee at 3:11 PM on November 28, 2006

I can get pretty close in Firefox and Safari. (It's a train wreck in IE, but I don't have time to fix it.)

Instead of floating the sidebar, you can position it absolutely inside an relatively-positioned wrapper div, like this.

I used How To Clear Floats Without Structural Markup to clear the floats.
posted by kirkaracha at 4:02 PM on November 28, 2006

If it really is layout, and not grid-related data, then you can use CSS's table styling:

[div style="display: table"]
[div style="display: table-row"]
[div style="display: table-cell"]d1[/div]
[div style="display: table-cell"]d2[/div]
[div style="display: table-cell"]d3[/div]
[/div]
[div style="display: table-row"]
[div style="display: table-cell"]e1[/div]
[div style="display: table-cell"]e2[/div]
[div style="display: table-cell"]e3[/div]
[/div]
...

and so on. It does mean extra markup, but you can at least still keep layout in a separate stylesheet and keep markup distinct from layout.
posted by Deathalicious at 4:46 PM on November 28, 2006 [1 favorite]

Thanks. I knew there had to be a way to do this, but it's a difficult thing to google.
posted by Kickstart70 at 7:22 PM on November 28, 2006

According to this, Deathalicious's approach won't work in IE (even 7).
posted by grumblebee at 7:45 PM on November 28, 2006

In this case, only A B and C need to be divs - that other stuff is actually tabular data, right? You shouldn't use tables for layouts, but you SHOULD use tables for...a table. Which is what you have with D-H.

I am a huge supporter of divs for layouts, but you have a table there, it should be a table.
posted by jesirose at 7:12 AM on November 29, 2006