title: Am I suffering "divitis"? (CSS especialist needed)
body: <p>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:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;
    &lt;div class="container"&gt;
      &lt;div id="banner"&gt;
        &lt;h1&gt;&lt;a href="http://widerdesign.co.nr/"&gt;wider design&lt;/a&gt;&lt;/h1&gt;
        &lt;ul id="lang"&gt;
          &lt;li&gt;&lt;a href="index.php"&gt;English&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="es/index.php"&gt;Español&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="tw/index.php"&gt;中文(繁體)&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="cn/index.php"&gt;中文(简体)&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="intro"&gt;
        &lt;div id="tagline"&gt;
          &lt;h2&gt;Nulla vitae tortor mauris&lt;/h2&gt;
          &lt;p&gt;Pellentesque faucibus est eu tellus varius in susc...&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="about"&gt;
          &lt;h2&gt;right&lt;/h2&gt;
          &lt;p&gt;Pellentesque faucibus est eu tellus varius in susc...&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- #intro --&gt;
    &lt;/div&gt;
    &lt;!-- .container --&gt;
  &lt;/div&gt;
  &lt;!-- #header --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Explanation of the use of those divs:</strong></p>
  
  <ul>
  <li><p><strong>header:</strong> Defines the background color which expands until the end of the window (lies outside of the <code>div .container</code>)  </p></li>
  <li><p><strong>container:</strong> centers the content (but not the background)</p></li>
  <li><p><strong>banner:</strong> to define the background or border color around <code>ul#lang</code> and <code>h1</code></p></li>
  <li><p><strong>intro:</strong> same as above but for <code>#tagline</code> and <code>#about</code> (otherwise I have to define say padding or margin for tagline and about individually)</p></li>
  </ul>
  
  <p><strong>Am I overusing divs? Can this be simplified?</strong></p>