DIVISION TAG: Purposes and Best Practices

Div tags are used to contain areas which are largely referred to as boxes. DIVs boxes replace the need to use tables, nested tables and frames to control the placement of the content. Essentially a DIV is a box that allows you to interrupt the normal flow, which is left to right, and then wrap, and so on and so on.

By applying a DIV tag, you can interrupt the normal flow and create DIVs that specify how and where the content will be displayed. The real power comes into play when you nest DIVs within DIVs just like a cell in a table, or a table in a table.

Example of page without DIVS: to see how the content of this page would display without the DIVS, click VIEW/Page Style/ No Style. Notice, that all the content is still there, and the content just flows, left to right, and wraps when it runs out of space or becomes a new block level element is introduced (new p, header, list item, etc). The DIV properties (box types, positioning, and dimensioning) are simply not applied, but you still have all your content. This is the essence of the beauty of CSS - the elegant separation of presentation and content. If you open the external CSS file, you will almost always see all of the DIV rules concisely organized in one slick file.

The global file for this site is twoColFixHDR.css . The DIVs are: container, header, sidebar1, maincontent, and footer. The container DIV wraps around header, sidebar1, main content and footer.

Like a table: with three rows, and two columns

Like a frameset: including the frames: top, menu, main, and footer.

Isn't the CSS so much simpler than a table or frameset?

code Sample for the DIV tag and it's CSS

A Div tag with its associated ID goes into the HTML doc as seen below. Then the rules are defined in the CSS (best practice is to place rules in an external css.file) as seen below.

Code examples based on this page

Goes into HTML:

<div id="header">

Goes into CSS :

.twoColFixLtHdr #header {
background-image: url(../images/navbg110.png);
height: 150px;
width: 1000px;
padding: 0px;
background-repeat: no-repeat;
}

Common Mistakes: Overusing the DIV tag

A div tag should be used sparingly on containers only, not as method of structuring every element (like every block level element). Often this kind of misuse of the DIV tag is seen when a style class should have been applied instead of a DIV. The overuse of DIV tags is called divitus and bloats your code, and you lose all the leaner coding benefits of global styling.

How do DIVs and SPANs Relate?

Easy Peasy: Divs apply to block level elements, and Spans relate to inline elements you want to style separately within a block. Example: This block level paragraph is styled by the rules defined in its parent DIV tag maincontent. Now I will apply the span class=termhighlight to this five word piece of text as you can see if you look at this html source code.

Styling the DIV box

Once you understand the purpose of the DIV tag, then it is just a matter of selecting the the kind of box that is appropriate for the job, and applying then applying suitable positioning and dimensioning rules. No need to over think this, it's just about the why and when of the rules...

Each type of box has limitations and specific purposes - impatient seekers can take a look now Box Models.