A Recommendation on Positioning
When designing, we recommend the following general principles with regards to positioning choices:
- Try to layout the page using static positioning, which is the default. In this case, you'll rely entirely on float and the box model (padding, margin, and border) to lay out your page.
- If static positioning doesn't work (e.g., you need to have overlapping elements), try relative positioning first.
- Finally, use absolute positioning in conjunction with the other forms of positioning and only when you need to have an element positioned in an exact location.
Other Methods of Layout
There are many other ways to create multi-column layouts, each with its own advantages and disadvantages. We feel that the method we've laid out here is a good choice; however, it does have its disadvantages:
Meaningful markup: One of the advantages of CSS is that it makes it possible to structure HTML in a logical way. Ideally, you shouldn't have to throw in extra tags for formatting purposes. The methodology we show here makes a small compromise on this in two ways:
- The wrapper divs used to create "rows" and to apply backgrounds to columns are there for formatting purposes only. There is no other reason to structurally combine the individual columns in the "row".
- The "clearer" div contains no content at all. It's only there for formatting purposes.
Content order: In the three-column layout, we put both the menu and the sidebar before the main content. This is counter-intuitive as they don't show up on the page in that order. If a screenreader were to read the page, it wouldn't know to read the main content area before it read the sidebar. Likewise, search engines might place more importance on words that show up earlier in the source code. We've had to push those words down the page to achieve the layout we want.
The good news is that the other methodologies use the same basic CSS properties you have learned to use here. So if you decide that you can't deal with either of the two compromises we've made above, you should be able to pick up the other methodologies relatively easily.
One that we recommend is known as the . This methodology uses less meaningless markup (i.e., markup for formatting purposes only) and it doesn't compromise on content order. However, it makes other compromises:
- It doesn't allow for backgrounds that flow to the bottom of the "row".
- It's more difficult to modify and maintain. For example, to add padding to one column, you need to adjust multiple declarations in the code. With the methodology we show here, you simply change the value of the appropriate padding property.