One good technique for centering a fixed-with CSS layout is to use nested layers, a.k.a. nested divs. A nested layer is a div element inside another div, just as nested tables are tables within tables. In this scenario, the main div is a container. This is the div that you actually center. The nested layers inside provide the site content. Figure 16.1 shows a typical CSS layout with nested layers.
GEEKSPEAK
A nested layer or nested div is a div element that appears inside another div. |
This layout calls for four nested divs:
One for the Logo area with a width of 760 pixels
One for the Nav area with a width of 200 pixels
One for the Content area with a width of 400 pixels
One for the Links area with a width of 160 pixels
You also need a container div to hold these four.
The trick with this technique is to set the left margin of the page to the center point of the browser window, which you achieve by adding the style attribute to the body tag of the page:
<body style="margin-left: 50%;">
Notice the percentage value instead of an absolute, pixel-based measurement. Using a percentage here is wise, since you don't know for sure the width of your visitor's browser window.
Now, because the left margin of the page begins in the middle of the browser window, you need to express the position of the container div in relation to that margin. Use this code:
<div id="container" style="position: relative; width: 760px; left: -380px;">
The left offset is a negative number here, and for good reason. Since the position of the container div is relative instead of absolute, the browser uses the left offset a little differently, subtracting 380 pixels from the position of the left margin. Why 380 pixels? Because 380 is half of 760, which is the width of the entire layout. What you're doing, in essence, is finding the center of the page and then moving half of the layout to one side. The result is a perfectly centered container div.
When you use this technique, the left offset of the container div is always one-half of its width. However, if you have no time for math, Topic 15. Their position is absolute, but, because they are nested, the browser uses their parent elementin this case the container divas the reference point for counting top and left offsets, not the upper-left corner of the browser window.
Here's the code for the entire layout:
[View full width]<body style="margin-left: 50%;"> <!-- The style attribute moves the left margin of the page to the center of the browser
window. --> <!-- Here is the container div. Its negative left offset is relative to the left margin of the page as defined in the body tag, and its value comes from half of its width. --> <div id="container" style="position: relative; width: 760px; left: -380px;"> <!-- Here come the nested divs. --> <div id="logo" style="position: absolute; width: 760px; top: 0px; left: 0px;"> Logo </div> <div id="nav" style="position: absolute; width: 200px; top: 100px; left: 0px;"> Nav </div> <div id="content" style="position: absolute; width: 400px; top: 100px; left: 200px;"> Content </div> <div id="links" style="position: absolute; width: 160px; top: 100px; left: 600px;"> <!-- That's it for the nested divs. --> </div> <!-- The line above closes the container div. --> </body>