untitled

(John Hannent) #1

Vertical Positioning .....................................................................................


If you specify no positioning, your Web page elements flow into the page
using default flow: The browser simply stacks the elements along the left side
of the screen in the order that you locate them in the HTML code, as shown
in Figure 9-5:

This default positioning takes effect unless you specifically use positioning or
floating to violate the normal stacking behavior.

Also by default, the height of an element is, at the most basic level, deter-
mined by the element’s content. For example, the image in Figure 9-6 is this
size in the browser because it is this size in reality. That’s the size that the
lure.jpg graphics file defines for this image.

<img style=”border: thin solid”; src=”lure.jpg”;>

Images can be resized in graphics applications, but you can also resize them
via CSS using specific widthand heightproperties. The result is shown in
Figure 9-7:

<img style=”border: thin solid; width=380px; height=240px;”
src=”lure.jpg”;>

Figure 9-5:
Default
positioning
enables the
browser
to decide
how your
elements
should stack
up, and
the results
can be as
unappealing
as this.


Chapter 9: Spacing Out with Boxes 173

Free download pdf