HTML and CSS Reference
In-Depth Information
Sites with centralized columns usually have the header and the main menu on the top. Optionally, there might
be a secondary or submenu on the left (or right) within the main column. Quite often there is a footer at the bottom,
usually within the main container (not affecting the layout).
There are various possibilities to horizontally center page content. A frequently used method applied the
attribute value
auto
to the left and right margins of the container (Figure
9-2
). This technique was introduced in the
errata of the CSS2 specification [3]. Listing 9-1 shows an example.
Figure 9-2.
Centralizing with autowidth margins
Listing 9-1.
Centralizing with Autowidth Margins
#content {
width: 720px;
margin: 0 auto;
}
This method works on all browsers that support CSS2+.
Another method for centralizing the content, introduced by Simon Coggins, was to use offsets and negative
margins. After declaring the width of the container element (similar to the previous method), its left edge is
horizontally centered within the page by the combination of absolute positioning and a 50 percent left offset. Since
the content begins on the second half of the page, the left margin of the layer should be set to the opposite of half the
width of the layer. For example, if the width of the layer to be centralized is 780px, the left margin should be set to
-390px (Figure
9-3
).
Search WWH ::
Custom Search