Floating the Container


To move the container across to the right edge of the browser window, use float: right.

When the container is floated, it must be given a width. In this case, you will use width: 182px.

Why the strange width? The image inside of this container is 180px wide. Later in this lesson, the image will be given a 1px-wide border. The right border width (1px), left border width (1px), and image width (180px) add up to 182px.

Next, you might want to create some space around the container so that text and other elements don't butt up against it (see Figure 11.1). You can achieve this by applying margins to the right, bottom, and left of the container as shown in Listing 11.3.

Figure 11.1. Screenshot of floated container.


Listing 11.3. CSS Code Floating the Container
div.imagecaption {     float: right;     width: 182px;     margin: 0 1em 1em 1em;     display: inline; } 

Floats, Margins, and Internet Explorer 5

If you view samples from this lesson in Internet Explorer 5 and 5.5 for Windows, you will notice that the right margin is actually much wider than in other browsers. In fact, it is 2em widedouble the width it is supposed to be. This is Internet Explorer's Double Margin Float Bug.


This bug occurs when you apply a right margin to a right floated element and it sits directly against the right edge of the parent container.

The opposite is also true. The bug will occur when you apply a left margin to a left floated element and it sits against the left edge of the parent container.

Luckily, there is a solution. Simply add display: inline to the rule set. All other browsers will ignore this declaration, but Internet Explorer 5 and 5.5 for Windows will then apply the correct margin width.





Sams Teach Yourself CSS in 10 Minutes
Sams Teach Yourself CSS in 10 Minutes
ISBN: 0672327457
EAN: 2147483647
Year: 2005
Pages: 234
Authors: Russ Weakley

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net