Am I suffering "divitis"? (CSS especialist needed)

Question

I've read lots of articles that condemn the excessive use of divs. I have a feeling that I might be doing that in the following mark up:

HTML:

<div id="header">
    <div class="container">
        <div id="banner">
            <h1><a href="http://widerdesign.co.nr/"&gt;wider design</a></h1>
            <ul id="lang">
                <li><a href="index.php">English</a></li>
                <li><a href="es/index.php">Español</a></li>
                <li><a href="tw/index.php">中文(繁體)</a></li>
                <li><a href="cn/index.php">中文(简体)</a></li>
            </ul>
        </div>
        <div id="intro">
            <div id="tagline">
                <h2>Nulla vitae tortor mauris</h2>
                <p>Pellentesque faucibus est eu tellus varius in susc...</p>
            </div>
            <div id="about">
                <h2>right</h2>
                <p>Pellentesque faucibus est eu tellus varius in susc...</p>
            </div>
        </div><!-- #intro -->
    </div><!-- .container -->
</div><!-- #header -->

CSS:

.container {
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
}

/* header */
#header {
    background: #EEE;
}
#header h1 {
    float: left;
}
#header h2, #header a, #header p {
    color: #999;
}
#header h1 a {
    background: url(../images/logo.png) no-repeat scroll 0 0;
    float: left;
    height: 30px;
    text-indent: -9999px;
    width: 500px;
}
#banner {
    border-bottom: 1px solid #DDD;
    padding: 0 0 15px 0;
    margin: 30px 0 30px 0;
    overflow: hidden;
    width: 960px;
}
#lang {
    float: right;
    padding: 9px 0 0 0;
}
#lang li {
    float: left;
    margin: 0 0 0 20px;
}
#lang li a {
    font-size: 10px;
}

/* intro */
#intro {
    overflow: hidden;
    padding: 0 0 30px 0;
}
#tagline {
    float: left;
    margin: 0 40px 0 0;
    width: 540px; /* 560 */
}
#tagline h2 {
    font-size: 24px;
}
#about {
    float: right;
    width: 380px;
}

Explanation of the use of those divs:

header: Defines the background color which expands until the end of the window (lies outside of the div .container).

container: centers the content (but not the background).

banner: to define the background or border color around ul#lang and h1.

intro: same as above but for #tagline and #about (otherwise I have to define say padding or margin for tagline and about individually).

Am I overusing divs?

Can this be simplified?

Answer 1

It looks perfect. This should be taken as an example!

One symptom of "divitis" is when you see a list of <div>'s instead of using a <ul>.

Answer 2

Am I overusing divs?

Depends on your needs, but IMHO no.

Can this be simplified?

Maybe with tables, but tables are typically rigid and unforgiving when using them across multiple browsers.

Answer 3

You're using <ul>s for navigation, and <h1><h2> for headings - that's good enough for me. I couldn't think of a more fitting element for any of the divs you are using. Would pass my quality check without further ado.

Answer 4

You're using <p>, <h*> when you need them so it's correct.

What is bad is using div instead of an appropriate element. There isn't such thing here.

Answer 5

Everyone may have a different opinion on this subject, but here's my opinion:

You're not over using <div>.

If you were using <div> when you should be using <h2>, <p>, etc, then you would certainly be doing it wrong. In other words, if you're bending <div> to fit your every purpose, you've got a problem.

Unfortunately, when CSS started to get popular, there were a lot of articles written promoting this practice with titles/themes following a "Use <div> instead of <tagX>!" pattern.

Answer 6

For the most part your markup is fine. Each site presents slightly different problems. I would argue that your code could be improved by removing #intro and just applying the CSS to the two columns.

Depending on the rest of your page, you may be able to do without the #header div.

Additionally, you can style html AND body if needed to help with multiple backgrounds/containers. Just remember that body starts acting like a div (doesn't extend to the bottom of the browser) as soon as you start applying styles to html.

Using divs or the new HTML 5 block elements, is all about making semantic sense first, and giving places to hang your CSS second.

Since each of your div elements serves a specific purpose where they provide semantic grouping of elements that go together, I would say your code is just fine.

For the record, this is divitis:

<div class='image'>
  <div class='shadow'>
    <div class='bottom-shadow'>
       <img src="..." alt="" />
    </div>
  </div>
  <div class="clear"></div>
</div>

Answer 7

You can start to use the new HTML 5 elements now, with a few JS tricks.

You then get the really useful header, footer, article, aside and menu elements.

Combine that with CSS3's styles for rounded corners, shadows... divitis may have a cure, but we will have to wait to get full support for that.

Answer 8

There is one change that immediately comes to mind:
If these are really all of your styles, ditch the .container div. Since it has no styles, it's redundant.

Answer 9

I tried the code in FF3.5 and IE8. The background color defined for "header" div, in FF3.5 the entire header div has that color. But in IE8, the background color shows only for the banner and the header h2 in intro div.

So the question is should the background color apply to the entire header div or is it meant only for a specific portion?

And for container div, the attribute class has the value "container". This class is not defined in the css.

Answer 10

Not overused at all. It's clean, semantic code with just 2 divs related directly to styling only (don't know if your .container div has styles - I would guess so and that you use them in other places because it's a class). Semantic code - that's what counts! I think you did a great job.

Answer 11

This is great markup. Good semantic use of all elements. And beautiful use of comments. (Yes I saw this was already answered and voted correct but I am new and looking for some points, had I been here first, wammo!)