BlogoSquare

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 :

1. Instantly close your div. When opening a div element, close it on spot, even before putting things inside it.

<div></div>

2. 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

3. 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.

4. 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.

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.

Related 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)

Search elsewhere