Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The Power of <div>
When setting up a web site, the introduction of a div element adds an invisible structural element to a web page. Any style applied to a div will propagate down the document tree to all the children of the div.
To see how this div structuring works, let’s look at the outline of a typical three-column web page, as shown in Figure 1.
)
Figure 1 The structure of a typical three-column web page.
The web page in Figure 1 has all the major parts you might expect in a three-column design: header section, navigation, three columns, and footer. As you visualize your web page design, the "div thing to do" is to organize your HTML around the divs that reflect your major structural sections. Then, give each div element an id attribute, making sure that each attribute value is unique. Listing 1 shows the overall structure of your web page with divs and their id values. For each id attribute, use a name that reflects the structural part of the web page.
Listing 1 The div elements help structure a web page.
<html> <head> .. </head> <body> <div id="header"> ... </div> <div id="navigation"> ... </div> <div id="leftside"> ... </div> <div id="rightside"> ... </div> <div id="body"> ... </div> <div id="footer">...</div> </body> </html>
While the div elements and the id attributes don’t actually do anything to a web page, their inclusion opens the door to maximizing the power of CSS. The connection occurs via the id attribute value. When a web page is paired with a style sheet, any styling associated with #name is applied to any children of div where the id matches. For example, all that’s needed is for the following to be added to a style sheet:
#leftside { ... CSS details for left column construction ...}
Thus, although our web page contains no styling information per se, it does include a link to a style sheet that allows a browser to render the page based on what the style sheet says.
Using divs and structural ids is an alternative to using tables to control page layout. Tables work fine, but using div tags and CSS is considered a better way to go in defining web pages. For some of the amazing things you can do with CSS, check out the CSS Zen Garden.