What Are Divs And How Should You Use Them?

A div is like a box, in terms of appearance (if you just attach a border to it) and function.
You make a div and you put stuff in it, anything at all.

It allows you to separate content up into separate areas.

If there are several bits of content that you want to stand out from everything else around them, put them in a div. An example could be a quote from someone, the quote goes in the div, and you style the div however you feel appropriate so that the div stands out.

A div can have a unique ID, a Class, or both, or even several Classes, this can be very useful in some circumstances, but for the most part you'll probably only assigin 1 ID or 1 Class to a div.
If you just use a div with no Class or ID, it will be as if you didn't do anything to it at all, so while your naming your divs you might as well give them a useful and descriptive name, this will help you to figure out what each div is,contains and represents later when you come back to the page in the future (And have forgotten how and why you did what you did).

Divs Better Than Tables For Layouts?

Officially tables were meant for data, columns and rows of data, however before css came around tables were used for the structure of webpages and many websites still do this today.

Advantages of Using Tables:

  • It's quicker to produce a grid based layout using tables than it is for css.
  • Your table based layout will generally look the same in all browsers without having to do much (If any) modifications. Though it should be noted that this isn't css's fault, it's generally the browsers poor level of support that it the cause, but unfortunately we have no control over this aspect so we have to deal with it until the browser creaters decide to update them.

Advantages of Using CSS:

  • You'll be able to do much more fancy things with a css based layout than you can with tables.
  • Because of the compact nature of css, it will generally load much faster than a table (Making your visitors happy and saving you money in bandwidth).
  • The code will be much more eye-friendly, making it easier for you to change specific parts of the layout you want without as much effort or eye strain. Trying to read many nested tables for a website layout for example can be quite a chore.


In conclusion, using tables for site structure is bad practice and shouldn't be done.
However, if you want to display data (The belongs in a table) by all means use one, don't kill yourself by attempting to create a pure css table, the term "re-inveting the wheel" comes to mind. Of course just because you use a table for your data, it doesn't mean it has to look like crap, by all means spruce it up with css and make it look all nice and fancy if you want to.

If you enjoyed this article, please consider giving it a +1

Tags: css, div

Published: 4/27/2014 1:05:34 PM
By: Stephen Warren