| home / authoring / style / sheets / css_mastery |
|
|
|
The auto margin method of centering is by far the most common approach, but it does involve using a hack to satisfy IE 5.x. It also requires you to style two elements rather than just the one. Because of this, some people prefer to use positioning and negative margins instead.
You start as you did before, by defining the width of the wrapper. You then set the position property of the wrapper to relative and set the left property to 50%. This will position the left edge of the wrapper in the middle of the page.
However, you don't want the left edge of the wrapper centered—you want the middle of the wrapper centered. You can do this by applying a negative margin to the left side of the wrapper, equal to half the width of the wrapper. This will move the wrapper half its width to the left, centering it on screen:
Your choice of centering technique comes down to personal taste. However, it is always useful to have several techniques up your sleeve, as you never know when one may come in handy.
There are a few different ways of doing CSS-based layout, including absolute positioning and using negative margins. I find float-based layouts the easiest method to use. As the name suggests, in a float-based layout you simply set the width of the elements you want to position, and then float them left or right.
Because floated elements no longer take up any space in the flow of the document, they no longer appear to exert any influence on the surrounding block boxes. To get around this, you will need to clear the floats at various points throughout the layout. Rather than continuously floating and clearing elements, it is quite common to float nearly everything, and then clear once or twice at strategic points throughout the document, such as the page footer.
To create a simple two-column layout using floats, you need to start off with a basic (X)HTML framework. In this example the (X)HTML consists of a branding area, a content area, an area for the main navigation, and finally a page footer. The whole design is enclosed in a wrapper div, which will be horizontally centered using one of the preceding methods:
The main navigation for this design will be on the left side of the page and the content will be on the right. However, I have chosen to put the content area above the navigation in the source order for usability and accessibility reasons. First, the main content is the most important thing on the page and so should come first in the document. Second, there is no point forcing screenreader users to trawl through a potentially long list of links before they get to the content if they don't have to.
Normally when people create float-based layouts, they float both columns left, and then create a gutter between the columns using margin or padding. When using this approach, the columns are packed tightly into the available space with no room to breathe. Although this wouldn't be a problem if browsers behaved themselves, buggy browsers can cause tightly packed layouts to break, forcing columns to drop below each other.
This can happen on IE because IE/Win honors the size of an element's content, rather than the size of the element itself. In standards-compliant browsers, if the content of an element gets too large, it will simply flow out of the box. However, on IE/Win, if the content of an element becomes too big, the whole element expands. If this happens in very tightly packed layouts, there is no longer enough room for the elements to sit next to each other, and one of the floats will drop. Other IE bugs, such as the 3-pixel text jog bug and the double-margin float bug (see Chapter 9), can also cause float dropping.
To prevent this from happening, you need to avoid cramming floated layouts into their containing elements. Rather than using horizontal margin or padding to create gutters, you can create a virtual gutter by floating one element left and one element right (see Figure 7-2). If one element inadvertently increases in size by a few pixels, rather than immediately running out of horizontal space and dropping down, it will simply grow into the virtual gutter.
Figure 7-2. Creating a two-column layout using floats
The CSS for achieving this layout is very straightforward. You simply set the desired width of each column, then float the navigation left and the content right:
Then, to ensure that the footer is positioned correctly below the two floats, the footer needs to be cleared:
The basic layout is now complete. Just a few small tweaks are required to tidy things up. First, the content in the navigation area is flush to the edges of the container and needs some breathing room. You could add horizontal padding directly to the navigation element, but this will invoke IE 5.x's proprietary box model. To avoid this, add the horizontal padding to the navigation area's content instead:
The right side of the content area is also flush to the right edge of its container and needs some breathing room. Again, rather than apply padding directly to the element, you can apply padding to the content and avoid having to deal with IE's box model problems:
And there you have it: a simple, two-column CSS layout (see Figure 7-3).
Figure 7-3. Floated two-column layout
| home / authoring / style / sheets / css_mastery |
URL:
