Am I suffering "divitis"? (CSS especialist needed)
- by janoChen
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/">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?
