Wednesday 31st of August 2016 04:13:09 PM

Book Home in Figure 11-7, but that's the effect we want.

Figure 11-7

Figure 11-7. Two columns of text

We may eventually have to adjust the point at which the divisions are placed, but for the moment, let's leave things as they are.

Actually, there is one more thing we should add. Here's the markup:

<DIV STYLE="float: right; width: 45%;">

Cascading Style Sheets: The Definitive GuideSearch this book

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Index: Z

z-axis: 9.5. Stacking Positioned Elements
z-index property: 9.5. Stacking Positioned Elements

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

element should be at pixel position 85; even though this is higher than the top inner edge of the float's parent element, the math works out such that the specification isn't violated. A similar line of reasoning explains how the left inner edge of the floated element can be placed to the left of the left inner edge of its parent.

Many of you may have an overwhelming desire to cry "Foul!" right about now. Personally, I don't blame you. It seems completely wrong to allow the top inner edge to be

<IMG SRC="ugly2.gif">

If you resize the  browser window the image jumps around as the lines re-wrap.  Here's an in-line greyscale image with default settings and unpredictable placement on the page.  If you resize the browser window the image jumps around as the lines re-wrap.  In this case, the image is in the same directory as this HTML file, but you could reference an image in another directory by its (the paper) is the same as the document size, at least for that page.In a web browser, though, the viewing area can change as the userresizes the browser's window. This will cause thebackground's origin image to shift as the windowchanges size. Figure 6-56 depicts several views ofthe same document. So in a certain sense the image isn't fixedin place, but it will remain fixed so long as the viewing areaisn't resized.

Figure 6-56

Figure 6-56. Centering still holds, even if the image is "fixed"

commonly used to "scale" images, either up or down. Thus,if an image is 150 pixels wide and its width isset to 75px , then the image will be displayedhalf as wide as it would ordinarily appear. In most browsers, theheight will be scaled to match, unless it has been explicitly set toa certain value.
Figure 8-27 shows a fewpossibilities.

Figure 8-27

Figure 8-27. Scaling images with the width property

It's also possible to scale an image (or other replaced