Do I suffer from a “dividend”? (CSS specialist required)

Question

I have read many articles that condemn the excessive use of divs. I have a feeling that I could do this in the following markup:

.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; } 

 <div id="header"> <div class="container"> <div id="banner"> <h1><a href="http://widerdesign.co.nr/">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 --> 

Explanation of using these divs:

• header: Defines the background color that extends to the end of the window (located outside the div.container ).

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

• banner: to determine the background color or border 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 separately)

Am I abusing a div? Can this be simplified?

Answer 1

It looks great. This should be done as an example!

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

Answer 2

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

Depending on the rest of your page, you can do without the #header div.

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

Using divs or new HTML 5 block elements is all about semantic meaning, and lets places hang your CSS second.

Since each of your div elements serves a specific purpose, where they provide a semantic grouping of the elements that go together, I would say that your code is 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 3

You use <ul> for navigation and <h1><h2> for headings - this is good enough for me. I could not come up with a more suitable element for any of the div that you are using. Would pass my quality control without further ado.

Answer 4

You use <p> , <h*> when you need them to get it fixed.

What's bad is using a div instead of the corresponding element. There is no such thing.

Answer 5

Everyone may have a different opinion on this, but here is my opinion:

You are not using using a <div> .

If you used <div> when you should use <h2> , <p> , etc., then of course you are doing it wrong. In other words, if you bend the <div> to fit your goals, you have a problem.

Unfortunately, when CSS began to gain popularity, many articles were written promoting this practice with titles / themes after "Use <div> instead of <tagX> !". template.

Answer 6

Now you can start using the new HTML 5 elements with a few JS tricks.

Then you get really useful headers, footers, articles, to the side, and menu items.

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

Answer 7

This is a great markup. Good semantic use of all elements. And the beautiful use of comments. (Yes, I saw that there were already answers to this and voted correctly, but I'm new and looking for some points if I were here first, wammo!)

Answer 8

Not too used. This is pure, semantic code of only 2 divs, directly related to the style (I don’t know if your .container div has styles - I would assume that you use them in other places, because it is a class). The semantic code is this! I think you did a great job.

Answer 9

One change immediately comes to mind:
If this is really all your styles, .container div. Since he has no styles, he is superfluous.

Answer 10

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

So the question is, should the background color be applied to the entire title bar or is it intended only for a specific part?

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

Answer 11

I would suggest never using id in CSS rule declarations. In fact, I am a proponent of not using id at all, it's just not worth it. Classes work just fine, with less complexity.

Answer 12

Am I using divs?

Depending on your needs, but IMHO not.

Can this be simplified?

Possibly with tables, but tables are usually tough and inexorable when used in multiple browsers.