How deep are your DIVs?

Forum Moderators: open

Message Too Old, No Replies

How deep are your DIVs?

Dabrowski

4:47 pm on Apr 24, 2009 (gmt 0)

ok, I'm finally attacking my personal black hole that is CSS.

I've got some nice layouts working now, columns, columns within columns etc, with some standardised code that can easily be ported to other sites without modification.

My question is, how many nested DIVs for positioning is acceptable?

Immediately after my <body> I have 2 as the page has a shadow, so an inner and outer required for that. Then my content is a further 2 deep, one container and one column. I think that's ok.

But within that column, I have 2 columns with centered content. So another container, column, and an extra one for centering the whole content. Now up to 7. Thinking this is a little too far?

punisa

11:32 pm on Apr 24, 2009 (gmt 0)

I see no problem there, when I work on some large scale application I have up to 20, lol.
But soon you'll figure a way to organize them.

Sometimes you can actually cut it short. For example if you want a "boxy" link you don't need to wrap the a tag in div, you can just add a class to your a tag and set its display mode to "block" : )
Just an example that I figured back when I was almost a year in CSS, lol.

Enjoy, CSS rules : )

g1smd

12:15 am on Apr 25, 2009 (gmt 0)

Rarely go deeper than three or four. I just don't like that sort of complexity.

tedster

12:50 am on Apr 25, 2009 (gmt 0)

For me, it helps to understand that a <div> is essentially a divison of the content, and I can apply all kinds of CSS rules to <p>, <h1>, <h2>, <li> and the like. Once I got beyond thinking of <div> as merely a way to apply display rules, a lot of "deep nesting" issues just evaporated.

rocknbil

1:35 am on Apr 25, 2009 (gmt 0)

I try to avoid div-itis © swa66 by asking first: is any other element appropriate for this content?

Sometimes you might just have to, but usually you don't.

Dabrowski

12:49 am on Apr 27, 2009 (gmt 0)

@tedster:

I'm intrigued by your comments, and agree I would like to only use a DIV for a separate piece of content.

However, as far as I'm aware there isn't a tag that's strictly for layout only, so how would you separate columns within columns?

tedster

3:19 am on Apr 27, 2009 (gmt 0)

The time I can think of with columns within columns, the innermost columns are data so I use a table. If it's true content that needs to be formatted into columns, that does sound like a nested div.

Dabrowski

11:21 am on Apr 28, 2009 (gmt 0)

Thanks for all advice, I'll stick with what I've got I think.

Without the page 'floating' on top of the background it would only be 5 which seems quite acceptable.

Cheers!

tangor

12:49 pm on Apr 28, 2009 (gmt 0)

Tedster said it right... just adding that FOR ME a "column in a column" is a sidebar, which is another way of saying nested. That said why complicate things?

Header
C1 C2
Footer

is traditional

Header
Ad Ad Ad
C1 C2
Ad Ad Ad
Footer

also works.

Four/Five seems to be the magic number (divs). My ads appear in the same div(s). KISS method. HOWEVER, nothing is etched in stone and "max" divs has not yet been tested in the real world so going for more is not a bad thing...just a thing that takes extra work.