Web Design with HTML and CSS

A brief history of layout techniques on the web

Lesson 7, Introduction to CSS Layout 151

You have now reached the inner wrap section, which contains the sidebar and the main

content sections. You will learn to create columns by positioning them with divs. The

current CSS specifi cation does not have a column element; “columns” are styled divs that

are often taller than they are wide. To understand how columns are made, you need to

understand the concept of the CSS fl oat property.

Understanding the CSS fl oat property

The fl oat property in CSS allows text to wrap around an image. This style was borrowed

from print design, where the eff ect is called text wrap or runaround. CSS achieves this eff ect

by allowing elements following a fl oated element in the HTML markup to surround the

element, eff ectively changing their position. This behavior also makes it possible to create

columns on a page.

In the left image below, there is an inline graphic nested inside a paragraph. This is the default

behavior of the graphic, as there is no fl oat property. In the right image, nothing changes

except that the rule fl oat:right has been applied to the graphic. The graphic shifts as far to

the right as posssible and the text wraps around the left side automatically.

An image in the default fl ow of HTML (left). The same image fl oated to the right (right).

You can also have a fl oat value of left. In the above example, this would place the graphic at
the left-most margin and wrap the text on the right.

The only values possible for a fl oat are left, right, or none. You cannot center an object using

the fl oat property.