Limit Your DIVS
During the years of honing my HTML skills I have been tempted and often required to serve up the cleanest code I possibly can. I quickly learned that all elements within my document – everything from a <p> to a <ul> to a <h5> – can accept the same style rules as a div.
This got me thinking, why even use a div for styling when you can apply the style directly to your elements? I started to explore this concept further and over time noticed one repeating outcome when limiting my div use: consistent cross browser rendering!
When I limited the use of my divs all the major browser including both IE6 and IE7 would render the sites nearly perfectly. Or with very little fixes needed.
So, this obviously brings me to the point of this article, what if you build a site without any divs at all?
It’s possible and I’ve done it- not that it’s magic but proves divs nor tables are necessary for layout
www.nodivs.com is a proof of concept site that I’ve put together to show how a typical website can be built without divs.
No div Contact Box
To give you all a taste of what is involved (and to show how simple it is) to build a site without divs, lets take a detailed look at something like this contact box:
This is a standard contact box that might appear in a side column on your website and allow people to submit their information to you. The box’s code typically would look something like this:
<div id="formHolder">
<p>Order Your NoDivs Today</p>
<form>
<!-- form stuff here -->
</form>
</div><!-- /formHolder -->And the css to go with it:
#formHolder{border:5px solid #ffffff; padding:10px; margin-top:10px} #formHolder p{font-size:180%; color#ffffff;} #formHolder form{/*any styles for the form */}
As far as markup goes it’s all pretty clean and uses only one div. But is a perfect example of an unnecessary div being used on your site. div and forms are both block elements, they will accept styles the same and render the same.
To transition to a no div layout would be simple, just apply the div style to the form and move on. You can either move the p tag inside the form, or as a smarter make the p tag into a legend. So something like this:
<form id="formHolder">
Order Your NoDivs Today
<!-- form stuff here -->
</form>And a nearly identical CSS to what we had before just replacing the #formHolder p with #formHolder legend.
#formHolder{border:5px solid #ffffff; padding:10px; margin-top:10px} #formHolder legend{font-size:180%; color#ffffff;} #formHolder form{/*any styles for the form */}
Ok lets move onto something a little more difficult that usually requires a bunch of divs to create.
Building a div-less header
This is the header that is located at nodivs.com. It’s pretty straight forward, a logo that links to the home page, a call to action box and of course the main navigation.
The markup on a typical div filled something would looks something like this:
<div id="header">
<div id="topHeader">
<div id="logo">
<a href="#">No Divs</a></div>
<div id="contantBox">
<h2>Contact NoDivs.com 1-888-1485</h2>
</div>
</div><!-- /topHeader -->
<div id="mainNav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div>
</div><!-- /header -->Pretty straight forward I would say, and I might even be a tad conservative in the number of divs that I’m using. But I think you get the idea.
Now, this is how that same header would be built without divs.
<h1><a id="logo" href="#">Welcome to NoDivs.com</a></h1> <h2>Contact NoDivs.com <span>1-888-1485</span></h2> <ul id="navBar"> <li>Home</li> <li>About</li> <li>Contact</li> <li>Login</li> </ul>
And here is the CSS:
h1{ background: #6788a1 url(/images/headerbg.gif) top left repeat-x; width:970px; height:110px;} h2{position:absolute; top:20px; right:0; font-size:180%; color:#ffffff; padding:10px; width:250px; text-align:center; background-color:#ffffff; color:#a17a67} h2 span{ font-weight:bold; margin-top:10px; display:block;} #logo{background:transparent url(/images/logoz.png) top left no-repeat; text-indent:-9000px; height:101px; width:118px; display:block;} #navBar{background:#48657a url(/images/navbg.gif) top left repeat-x; width:970px; margin-top:10px; list-style:none; float:left; margin-bottom:20px;} #navBar li{float:left; color:#ffffff; padding:10px;}
Basically what happens is the style is removed from the container divs and applied directly to its containing element.
Conclusion
The biggest thing I want you to take away from this, is NOT that using divs is bad and shouldn’t be done, but that the limited use of div tags create less problems and there for have less room for error when it comes to rendering in all browser types.
I encourage you all to go to www.nodivs.com and see how the rest of the site is built. The idea of removing divs, as you can see, is pretty straight forward. This is not going to be the end of divs, there are times where you will have to use the, but should give you a good example of how divs are overused currently on sites
February 17, 2009
Nice article, I agree the less tags the better (whether its a div or not) though I think using divs is totally dependent on the design. I also do not think many browsers have trouble displaying divs.
February 17, 2009
I see what you’re saying, and in many cases removing divs is totally valid; for example on unique elements like navigation.
But I can also see in a lot of cases you’re going to be removing a div tag in the HTML and replacing it with even more code in your CSS to replicate visual outcome, especially on the content areas of complex sites.
Good article for combating code bloat though!
March 14, 2009
I admit, I regularly struggle not to “over-div” my layouts. Sometimes it’s a bit of a trade off, but I know there are areas where I could clean things up. Thanks for helping me think “outside the div” (har har).
December 7, 2009
I’m curious, what trouble do DIVs cause in cross-browsers, I’m not aware of this and am wondering…
December 9, 2009
Bob,
Not using DIVs tends to make sites render more reliably cross-browsers. You’re removing an element in the code that could be the source of a browser not displaying correctly. Remove the variables and you’ll see less problems.
July 20, 2010
Buy:Accutane.Petcam (Metacam) Oral Suspension.100% Pure Okinawan Coral Calcium.Zyban.Retin-A.Arimidex.Mega Hoodia.Human Growth Hormone.Nexium.Valtrex.Prednisolone.Prevacid.Zovirax.Synthroid.Lumigan.Actos….
August 29, 2010
PC http://gbestfqw.APTAUTOPARTS.INFO/tag/Sony+PC+speaker+bose/ : PC…
bose…