HTML and CSS Reference
In-Depth Information
Figure 7-24.
The double-margin bug indents the image and caption in IE 6
In this case, the effect isn't critical, but it can have a disastrous effect when multiple elements are floated
alongside each other. Fortunately, the solution is very simple and it doesn't have an adverse effect on other
browsers.
When you add a margin to an element and float it to the same side, set its
display
property to
inline
. IE 6
then applies the correct margin. Of course, this is necessary only if you have to support IE 6.
Summary
Floating elements to the left or right is an important CSS layout technique. The basic principles are simple. The
floated element moves as far left or right as permitted by its parent element. Subsequent content moves up to
fill the available space alongside the floated element. The
clear
property prevents elements from moving up
alongside a float. Where floats can be difficult to understand is how the margins of surrounding elements interact
with the floated element. However, using a browser's developer tools to highlight the margins usually reveals
which margin you need to adjust.
In this chapter, you also learned how to apply multiple classes to an element and how to style them by
chaining class selectors. Then you saw how to create a two-column layout by adding a wide margin to one side
of the main content and floating the sidebar into the empty space. This technique relies on the sidebar coming
before the main content in the HTML markup, but
Chapter 12
demonstrates other techniques where the main
content comes first. Finally, you learned how to fix the IE 6 double-margin bug.
The next chapter looks in depth at adding background colors and images to your web pages.
