Divititis….beware, its catchy!

I’m sure you have heard someone either say or write about “divititis.” If not, it is referring to someone who over uses the ‘div’ tag. If someone with this terrible disease were to, say…design a navigation, they would do something like this:

<div id="container">
    <div id="navigationContainer">
        <div id="navList">
            <ul>
                <li>Nav item 1</li>
                <li>Nav item 2</li>
                <li>Nav item 3</li>
                <li>Nav item 4</li>
            </ul>
       </div>
    </div>
</div>

In most cases though, you could just have the first container and the ul. You can position any block level element, such as the ul, just as you would a div. By doing so, you would eliminate unnecessary code, making it cleaner as well as easier to read and figure out what is going on. Now of course, there are going to be times where you need extra container-y things to do some graphic awesomeness, because the multiple background CSS3 styling isn’t supported across the board. I get that, but I would bet a majority of the time, if you looked at your code, you could strip some of the crap out.

To give you an idea of what I’m talking about, I’ll give you a little example. This little bit also styles the body as if it were just a regular old container. Cause guess what….it is. Here is the html:

<body>
	<div class="left">Just some text.</div>
    <ul>
    	<li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
    </ul>
</body>

And here is the CSS (feel free to copy and test this of course, cause I didn’t believe the whole body thing either):

html {
	background-color: #CC6;	
	height: 100%;
}
 
body {
		width: 800px;
		margin: 20px auto;
		background-color: #ffffff;
		padding: 20px;
		overflow: hidden;
		height: 100%;
}
 
.left {
	background-color: #36F;
	float: left;
	width: 100px;
	height: 200px;
	color: #ffffff;
}
 
ul {
	float: right;	
}

Example webpage showing body stylingWhat does this look like? Take a look at the screen shot. Crazy right? Your saying, “HOW THE F#@$! CAN YOU DO THAT WITH THE BODY TAG?” Well, look at the styles and you will see. But that really isn’t the important part. You can see the ul floated right, and now you can style the heck out of it. Put a background image in it, style the li tags, add a drop shadow, whatever. The point is, You don’t need any other containers to do it.

The whole “divititis” thing is a very common disease, and almost every beginning to intermediate web designer/developer gets it at one point. Sometimes it is a matter of trying to push out a project quickly and you are not thinking of the best ways to do something, just the fastest. And there are times where that is what you need to do to get things done, because that is what you are familiar with. But really, if you sit back and look, you can find you can do some trimming. I like to build my pages, then go back and see what I can take out. You will be amazed at what you don’t need.

NOTE: Just so you know, to get the body to work like that, you need the 100% height on the html style, and overflow:hidden on the body, as well as the height also.

Tags: ,

2 Responses to “Divititis….beware, its catchy!”

  1. I was not cured of my divitis until just about a month ago. It’s strange how people who have turned away from table based design to “semantic html” can have 100000 container divs and not see how they’re being hypocritical.

    If you use divs on an as need basis, your code will be much cleaner.

    I honestly just didn’t know that elements other than divs could have the id attribute. Otherwise I wouldn’t have started out using so many containers.

  2. jcDesigns says:

    You can put an id on just about anything. A lot of times you don’t even need to put an id/class on something though, because you can use the id of the container.

    #divID ul { background-color: #ff0000; }

    That will target the ul within the div you are trying to hit. If you had multiple ul’s within the same div, and you only wanted to hit the first one you could do: #divID ul:first-child (depending on what browsers you are supporting of course – can’t remember if this hits IE6 or not, but it does hit 7).

    I like to code my page, then go back when I’m done, and see what I can ditch. There is always something that can be done to trim it.

Leave a Reply to Joseph McCullough