HTML and CSS Reference
In-Depth Information
Chapter 7
Floating Elements for Layout
As I explained in the preceding chapter, CSS treats HTML elements as boxes. Block-level elements force whatever
follows them down the page, even if there's sufficient room alongside. Inline elements sit alongside their
neighbors, but if one element is taller than the rest, it affects the line height. For example, images are treated as
inline elements. Inserting one in a block of text forces the text to align with the bottom of the image, as shown in
Figure
7-1
.
Figure 7-1.
Text doesn't automatically flow around an image
To get text to flow around an image, you need to use the
float
property, which takes an element out of the
normal flow of the document and moves it to one side to make room for whatever follows. So, if you float an
image to the left, the following text flows into the empty space created on the right. The same happens with block-
level elements. When you float a block-level element, as long as there's sufficient space alongside the floated
block, the following elements are no longer forced onto a new line, and they can move up. Floating a
<div>
element alongside another is a common technique for creating a main content area and sidebar.
Learning how to use the
float
property is an essential skill in current web page layout. The basic principles
are very simple, but floating elements can have unexpected consequences.
