When I first made the transition from tables to divs for layout (yeah, I was that guy once upon a time!), I clearly remember being frustrated at how difficult it was to achieve my goals without over using the div tag. My main problem aside from still finding my CSS feet was I had completely ignored what the div tag was intended for.
I was using <div> as if it were the holy grail of achieving all my design goals. These days most of us know better but I will concede that until HTML5 and CSS 3 are commonplace we sometimes have to use a div for the 'wrong' purpose. When I say 'wrong' purpose I mean there are times when we have to break the rules because of cross browser issues, and I'm OK with that for now.
Div, if you had forgotten, is short for division, and as the name implies is meant to be used to divide your mark-up into appropriate sections, such as the header, content, footer etc. Aside from those, your goal should be to reduce your reliance on div's as much as possible and make use of existing HTML tags.
The following part of this article will show some of the more common mistakes I've seen some designers do using divs (including yours truly) along with appropriate solutions.
The navigation
How it's sometimes done
<div class="nav">
<ul>
<li><a href="">First item</a>
<li><a href="">Second item</a>
<li><a href="">Third item</a>
</ul>
</div>Div-less solution
<ul class="nav">
<li><a href="">First item</a>
<li><a href="">Second item</a>
<li><a href="">Third item</a>
</ul>See what I did there? The only reason you contained it within a div in the first place was so you could position and style it. Why not position and style the <ul> instead?
The logo
How it's sometimes done
<div id="logo"><img src="mylogo.jpg" alt="CompuGlobalHyperMegaNet" /></div>Div-less solution
<h1 id="logo">CompuGlobalHyperMegaNet</h1>...with some CSS...
#logo {
width:200px;
height:100px;
background-image:url(mylogo.jpg);
text-indent:-9999em;
}The width and height are required to be the size of mylogo.jpg otherwise the div will simply collapse on itself and you won't see the background image. The text-indent will move the actual text off-screen so it's not visible on top of your logo.
The headings
How it's sometimes done
<div class="larger_header">Welcome to CompuGlobalHyperMegaNet</div>Div-less solution
<h1>Welcome to CompuGlobalHyperMegaNet</h1>That particular one is rare but I've seen it enough times in the past to justify mentioning it here.
Forms
How it's sometimes done
<div id="theform">
<div>Personal Information</div>
<form action="send.php" method="post">
<div>Name:</div><input type="text" id="name">
<div>Age:</div><input type="text" id="age">
<div><input type="submit" value="Submit" name="Submit" /></div>
</form>
</div>Div-less solution
<form action="send.php" method="post">
<legend>Personal Information</legend>
<label for="name">Name: </label> <input type="text" id="name">
<label for="age">Age: </label> <input type="text" id="age">
<input type="submit" value="Submit" name="Submit" />
</form>Conclusion
There are plenty of HTML tags at your disposal and the chances are you can accomplish your design goal by taking advantage of them. Try to limit divs to what they were intended for but as mentioned earlier there may be times when you just have to use an empty div. Those days are numbered but for now we can only do the best we can.
kHa
man you don't believe how much time i'll save by just sending a link of this post instead of explain all over again to the confused minds...
Saturday 6th June 2009 | 11:20 AM Reply Comment URL Profile Back to top