Proper design makes use of CSS to layout content instead of traditional tables’ layout. Now you would be using div elements to position items on your site. In this post I’ll give you some quick tips you should be knowing when using them.
Avoid a breaking layout
Surely, one of the most annoying issue is having a design that breaks. But many times, the solution is simply because of an unclosed div element. To avoid getting into such trouble, I encourage you using the following technique :
- Instantly close your div. When opening a div element, close it on spot, even before putting things inside it.
- Comment on the closing div. Put a comment on the closing div to tell for which div element you’re closing it. That is if you’ve opened a div for an item id="content", the closing div should be as follows :
<div id="content"> items here </div><!-- end of content -->If that div element happens to be for a specific class or id, put something appropriate to help pin-point this out:
An e.g for a class post-entry
<div class="post-entry"> item here </div><!-- end of .post-entry -->Note the dot in front of the post-entry to distinguish it as a class
- Hack IE if the need be.Many times positioning or styling of a div produce different results in Mozilla Firefox and Internet Explorer(6 or lower versions).
I would suggest developing for Mozilla Firefox since it’s the best thrustworthy browser and only at the end, use the following IE6 hacks to move things to fit perfectly as they should:
* html div[your div class or id item here]For e.g to force IE to abide by some styling for the div id=”entry”, you would use the following
* html div#entry { styling here }or for a particular class, in this example, div class=”post-entry” :
* html div.post-entry { styling here }Note: the space between the asterisk and the html text. When you use that code, it will instruct specifically IE6 in how to layout things.
- Limit your div uses. Don’t use too many div elements. Many people tend to use a div for every particular details.
Use div elements only when necessary, instead make use of the <span></span> element, useful especially when having to deal with block of text.
<div></div>
This should be some things you should take into consideration each time you’re using the div element. Now that would be great to hear from you, have you got anything to add to this quick list? What’s your advice on using div element? Please do take a comment and thanks for reading.
- Things you should know when using post excerpt
- The resourceful webdesigner’s toolkit.
- Resize your post’s images to boost your blog’s speed.
- The proper way to write code in your blog posts
- A 7 step guide to fixing your Wordpress sidebar in Internet (bloody) Explorer
- Top 5 Ways To Keep Your WordPress Blog Valid (And Why It Matters)
i don’t understand why you tell us not to use div too much and use span instead of div. span is exactly the same as div but span is inline and div is block, aren’t they ?
otherwise, good advice
@ Nym
you’re right. I think I should have clarified that point to don’t overuse nested div, use span within div whenever you can
btw check out this great article I found via 456BereaStreet
@ Angela
you mean a link/image button pointing to Gack Ink? Is that so? I’ve got a link among the member of section in the far most sidebar. Is that fine or should I change to or do something else?
[...] Things you should know when using the div element [...]
[...] Things you should know when using the div element [...]
Adding comments at the end of closing the div off, that is a good idea and to be honest I have actually never thought of that..
Good tip mate
@ Jermayn
thanks for reading through. Using that technique, I found it was easier to see clearly where the divs were placed avoiding confusion.
[...] Things you should know when using the div element [...]
i kinda have a love hate relationship with the div’s.
there extremely powerful but those IE hacks that you mention is where my … hate comes into play i hate having to hack to get things proper
[...] Things you should know when using the div element [...]