subject: Understanding Css Page Layout Div Elements In Adobe Dreamweaver [print this page] Several DIVs are normally required to build the page, each performing a certain role within the layout. First, we have the wrapper DIV. This is the DIV which contains all the other DIVs within the layout. Designers use it to give an overall shape to the entire page by providing it with two key attributes: a width and position within the browser (left, right, or centre). In the Dreamweaver layouts, this DIV is always named container.
Most web pages benefit from having a header at the top of the page with key branding information like a logo, banner, slogan, phone number, etc. This can all be placed in the header DIV which is normally the first DIV to be placed inside the wrapper. In the Dreamweaver layouts, this DIV is always named header.
The main content DIV is where you will place the lion's share of the page content-the important stuff. Each page within a site will have unique content in this area, whereas the content in some of the peripheral DIVs, such as headers and footers, may be similar or even identical for many pages. In the Dreamweaver layouts, this DIV is always named content.
If you float a DIV to the left or right of the main content, you create what is commonly referred to as a two column layout. Having one DIV floating to the left of the main content DIV and another on the right creates a three column layout. In the Dreamweaver layouts, these DIVs are always named sidebar1 (left) and sidebar2 (right).
The terms "two column" and "three column" are really misnomers in that they imply two or three columns of equal weight-which is not usually the case. The main DIV is normally the principal column, with the other two containing supplementary material such as links, headlines and promotional matter. (This is a trend rather than a rule-and, in any case, perhaps with the advent of paper thin monitors, designers will start creating web page layouts which mimic newspaper columns and we'll be able to hold our folded monitor in one hand and a beer in the other!)
If your page uses a footer DIV, it will typically contain information such as a copyright notice and secondary links. In the Dreamweaver layouts, this DIV is always named footer.
Another common use for a DIV is to act as a horizontal navigation bar containing links to the key pages in a given site. The Dreamweaver layouts do not include a horizontal navigation DIV.
