HTML and CSS Reference
Figure 7-30 shows the result.
Figure 7-30. Using overflow:auto; stops the float collapse problem.
Note that for this technique to work on IE, you also need to specify a width on the parent
container. In the example code, the 100% width combined with the padding and border widths
results in a horizontal scrollbar. You can work around this issue with a little planning; check
the comments in the SitePoint article if you experience any quirks that you can't get your head
around; someone else may have solved the problem.
Negativity Is Good for You
In this chapter you've learned about various positioning schemes and layout types: floated,
absolutely positioned, fixed, liquid, and elastic layouts. All of them have their various merits,
but they all suffer to some extent from their ability to adapt regardless of the source order of
the (X)HTML. It is a well-known fact that search engines like to see content related to search
phrases as near to the beginning of the document as possible, which is a good reason to
ensure that your basic page source order goes something like this:
Main page heading
Note While this order is most beneficial to search engines and people reading your content on small-
screen, non-CSS-capable devices, screen reader users may not be so well catered for if they have to search
through masses of content to get to the navigation. Some developers favor having navigation up front but
with a “skip over navigation to main content” link for users who may not be able to use a mouse and conse-
quently have to tab through the page.