I found this on net in google search
and see article here: http://www.thatcssguy.com/limit-your-divs/
See his final layout here: http://www.nodivs.com/
Some quotes from article
1
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.
2
it’s magic but proves divs nor tables are necessary for layout
Should we try to make sites like this?
On
You quote from the article, but in the comments the author himself states:
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.
So: switching divs for headings does not change the reliability of rendering (the article implies that, but the author does not mean that), but removing unnecessary nested divs elements help that, but as a good HTML layouter you should always do that ;)
Just keep in mind that you should prevent Divitis whenever possible, and making use of semantically correct markup helps your SEO efforts and accessability and karma and stuff.
EDIT:
OK, as all know, divitis is bad. Let's have a look at the article's markup:
<body>
<div id="page">
<div id="header">
<h1 id=logo">(some stuff)</h1>
<ul id="nav1">navi</ul>
</div>
<div id="columns">
(Content)
</div>
<div class="box6">
<div class="top"></div>
<div class="spacer">
<div class="col3">
</div>
<div class="col3">
</div>
<div class="col3 last">
</div>
<br class="fix">
</div>
<div class="bot"></div>
</div>
<div id="footer">
(Footer Content)
</div>
</div>
(Script tags)
</body>
Let's see: <div id="page"> to center the page with margin: 0 auto;. Apply this style to <body> and you can remove one div. The whole content of the <div class="box6"> is not exactly clean of divs, and absolutely unnecessary. And for the rest: See for yourself.
On
He has a point as far as using styles on the elements instead of automatically wrapping them in divs:
<ul class="navList">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
instead of
<div class="navList">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
He lost me though when he used absolute positioning to overlay a h1 with an h2 to create his header.
Maintainability is just as important as clean code. When I see a div named "header" I know what that is as opposed to this:
<h1 class="border"><a href="#" id="logo">Welcome to NoDivs.com</a></h1>
<h2 class="border">Contact NoDivs.com <span>1-888-1485</span></h2>
And he doesn't practice what he preach. Anybody who uses a "spacer" div to add padding between divs shouldn't talk about the dangers of divitis. :)
The article makes a number of good points on how to avoid "divitis", i.e. the usage of
divelements where there would be a semantically more fitting element. But this:is total bullcrap. DIVs are perfectly valid container elements and make sense in a lot of situations. Only where there is a semantically more suitable element (e.g.
ulin an unordered list like a menu,h1h2h3for headings,olfor ordered lists) is it wrong to use adiv, as it is usually wrong to use atablefor layout.What the author of the site you mention does is blatantly misusing other elements like
dl(definition lists) as surrogates ofdivelements, something that is as idiotic as misusingdivs as surrogates foruloletc. Look at the W3C's definition of ul, ol, and dl lists and consider for yourself whether those elements are supposed to do layout tasks like the author does use them for.As far as I can see, the insinuation that not using
divs somehow makes sites render better cross-browser is utter humbug. Correct me if I'm wrong, but I can not think of one single instance where this holds true.