Separation Of Content And Formatting

The whole idea behind markup languages like HTML is to separate the content of the page from the formatting, or layout, of that content. We've already seen how tables do this. We can lay out a page as a big table with differently sized cells and then put the appropriate content inside these cells.

<div> boxes offer a much greater ability to control the layout of a page. They allow us to take any content and shape it and place anywhere on a page with pixel precision. They are also the basis for the popular pop up and pop down menus you see on many web pages today. The little menus that pop up are <div> boxes.

You can put any content between <div> tags and then use CSS to style all sorts of borders, backgrounds, etc. that apply only to that block of content. It's sort of like a table cell on steroids.

<layers> VS <div> Boxes

The idea of making an HTML tag that would block off content and allow advanced styling and positioning of that content began with Netscape's <layer> tag. You'll often here what I call <div>s or <div> boxes referred to as <layers>.

Netscape took the approach of making a pure HTML tag that allowed for positioning attributes as well as many styling attributes that were put directly in the <layer> tag and could be dynamically changed with JavaScript.

Microsoft's Internet Explorer took a different approach. They used the existing <div> tag and allowed it each <div> to be identified with a unique ID using the ID attribute. This ID could then be styled and positioned with CSS, as opposed to HTML attributes, and manipulated dynamically with JavaScript.

In the final analysis, Microsoft's Internet Explorer's method won out. Netscape 4.x offers support for <div> boxes and still supports the <layer> tag. Microsoft Internet Explorer offers no support for the <layer> tag. To make things rough, however, Netscape's support of the <div> tag is not the same as IE's. We'll be discussing this more as we go.

So, <div> boxes arguably rule the day and the bulk of the Advanced CSS tutorials will be centered around making, styling, and positioning <div> boxes.

Using The ID Attribute

There are two things you need to do to make a <div> box. First, you must enclose some content in <div> and </div> tags and give the <div> an ID. That's all a <div> box is. The code looks like this:

<div id="myDivBox">
The content inside the box will go here.
</div>

If you make the above simple box, you won't notice anything particularly special. In the next lesson, we'll begin to style this box and you'll begin to see the real power behind <div> boxes.