Question

So, I practiced HTML/CSS, and wanted to build a simple sub-header, exactly the same as seen on http://www.phppennyauctiondemo.com/ (div id=”sub-header”, the part with categories).

And I did it like this:

<div id="sub-header">
  <div class="sub-mid">
  <ul id="nav">
    <li><a href="">All items (1)</a></li>
    <li><a href="">Shops and Coupons</a></li>
    <li><a href="">Kids toys</a></li>
    &nbsp;
  </ul>
  </div>
</div>

#sub-header
{
    background: url("/images/front_layout/header_sub_bg.gif") repeat-x;
    height: 31px;
    border-top:1px solid #708044;
    border-bottom:1px solid #d4dde1;
}

#sub-header .sub-mid
{
    width: 950px;
    margin: 0 auto;
}
#nav
{
    padding: 4px 0;
}

#nav li
{
    padding: 0 3px;
    border-right: 1px solid #B1C0C5;
    float: left;
}
#nav li a
{
    padding: 3px 8px;
    color: #607E87;
    text-shadow: 1px 1px 0 #FFFFFF;
    height:15px;
    display: block;
}

And this looks exactly the same as their sub-header (in firefox).

But when I took a look at their markup and CSS, I saw way much more div’s before the actual content, and much more CSS then I used:

<div id="sub-header" class="clearfix">

            <div  align="center">

                <div style="width:950px; text-align:left;">

                        <div id="select-categories">

        <ul id="nav">  UL after 4 divs... </ul>

Since I’m not a professional web developer, and I assume professionals built that page – my question is why did they use so much div’s that don’t do anything?

Is there something I don’t know about CSS/HTML?

Answer 1

Using that many divs is a disease we call ‘divitis’. It comes from the sickness that makes a developer forget he can frequently use elements such as ul, p, and so on as they are for positioning and styling without the need to wrap them in a div. Frequently, you can remove such extra div elements without harm other than probably needing to rewrite the CSS to account for that.

No vaccine has been found and only time and experience helps.