Am I suffering “divitis”? (CSS especialist needed) [closed]

Answer 1

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 2

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 3

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 4

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 5

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.