HTML and CSS Reference
In-Depth Information
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
.
