HTML and CSS Reference
Figure 7-23. Changing just two properties moves the sidebar to the right
This layout displays as expected in all browsers except iE 6. if you need to support iE 6, amend the styles
in the internet Explorer conditional comment in the <head> of the web page. Change the width in the
#wrapper rule to 1000px . you also need to add an iD selector for the main <div> changing margin-left
or margin-right to 34% . This is because iE 6 has problems with percentage widths that add up to exactly
100% . Reducing the overall total to 99% solves the problem. However, iE 6 has another problem with floated
elements, which is discussed in the next section.
Dealing with the IE 6 Double-margin Bug
IE 6 is rapidly fading into insignificance in most parts of the world, but if you still have to support it, you need to
be aware of the double-margin bug. If you add a horizontal margin to an element and then float it to the same
side, IE 6 doubles the margin. For example, the .figure.floatleft style used in this chapter adds a 40px left
margin to a <div> and then floats it to the left. IE 6 doubles the margin to 80px , indenting the image and caption,
as shown in Figure 7-24 .