Servage Magazine

There are dozens of CSS properties that allow you to change the appearance of text elements and the boxes they generate. But so far, we’ve merely been decorating elements as they appear in the flow of the document.

In this section, we’ll look at floating and positioning, the CSS methods for breaking out of the normal flow and arranging elements on the page.

Floating an element moves it to the left or right, and allows the following text to wrap around it. Positioning is a way to specify the location of an element anywhere on the page with pixel precision.

Floating

Simply stated, the float property moves an element as far as possible to the left or right, allowing the following content to wrap around it. It is not a positioning scheme per se, but a unique feature built into CSS with some interesting behaviors. Floats are one of the primary tools of modern CSS based web design, used to create multicolumn layouts, navigation toolbars from lists, and table-like alignment without tables. Let’s start with the float property itself.

float

Values: left | right | none | inherit

Default: none

Applies to: all elements

Inherits: no

Some key behaviour of floated elements is depicted below.

• A floated element is like an island in a stream.

First and foremost, you can see that the image is removed from its position in the normal flow yet continues to influence the surrounding content. The subsequent paragraph text reflows to make room for the floated img element. One popular analogy compares floats to islands in a stream—they are not in the flow, but the stream has to flow around them. This behaviour is unique to floated elements.

• Floats stay in the content area of the containing element.

It is also important to note that the floated image is placed within the content area (the inner edges) of the paragraph that contains it. It does not extend into the padding area of the paragraph.

• Margins are maintained.

In addition, margins are held on all sides of the floated image, as indicated by the dotted line. In other words, the entire element box, from outer edge to outer edge, is floated.
Positioning Basics
CSS provides several methods for positioning elements on the page. They can be positioned relative to where they would normally appear in the flow, or removed from the flow altogether and placed at a particular spot on the page. You can also position an element relative to the browser window(technically known as the viewport in the CSS Recommendations) and it will stay put while the rest of the page scrolls.

Types of positioning

position

Values: static | relative | absolute | fixed | inherit

Default: static

Applies to: all elements

Inherits: no

The position property indicates that an element is to be positioned and specifies which positioning method to use. I’ll introduce each keyword value briefly here, and then we’ll take a more detailed look at each method in the remainder of this chapter.

static

This is the normal positioning scheme in which elements are positioned as they occur in the normal document flow.

relative

Relative positioning moves the box relative to its original position in the flow. The distinctive behaviour of relative positioning is that the space the element would have occupied in the normal flow is preserved as an empty space.

absolute

Absolutely positioned elements are removed from the document flow entirely and positioned with respect to the browser window or a containing element (we’ll talk more about this later). Unlike relatively positioned elements, the space they would have occupied is closed up. In fact, they have no influence at all on the layout of surrounding elements.