Breaking up a Page into Divisions

Breaking up your page into divisions allows you to apply styles to an entire chunk of your page at once. This is particularly useful for designing layouts with CSS (see page 169).

To break up a page into divisions:


At the beginning of the division, type <div.


If desired, type , where name uniquely identifies the division.


If desired, type , where name is the identifying name of the class that the division belongs to.


Type > to complete the opening div tag.


Create the contents of the division.


At the end of the division, type </div>.

Figure 3.16. There is one large enclosing division (that begins with the level one header and goes to just before the closing body tag) and two inner divisions (that include the level two headers and their paragraphs).

Figure 3.17. You generally can't see the effect of divisions until you add styles (see page 127). Then they really shine. You can see this page with styles on my Web site (see page 26).


  • A division is a block-level element. That means that its contents automatically start on a new line.

  • In fact, the line breaks are the only formatting inherent to a division. Apply additional formatting by assigning styles to the division's class or id, as described in Chapters 714.

  • You're not required to label each division with a class or id, though they're much more powerful if you do.

  • You may apply both a class and id attribute to the same div element, although it's probably more usual to apply one or the other. The principal difference is that class is for a group of elements while id is for identifying individual, unique elements.

HTML, XHTML, & CSS(c) Visual QuickStart Guide
HTML, XHTML, and CSS, Sixth Edition
ISBN: 0321430840
EAN: 2147483647
Year: 2004
Pages: 340

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: