CSS Tips: Floating and Positioning

The idea behind positioning is fairly simple. It allows you to define exactly where element boxes will appear relative to where they would ordinarily beor relative to a parent element, another element, or even to the browser window itself. The power of this feature is both obvious and surprising. It shouldn’t shock you to learn that user agents support this element of CSS2 better than many others.

Floating, on the other hand, was first offered in CSS1, based on a capability that had been added by Netscape early in the Web’s life. Floating is not exactly positioning, but it certainly isn’t normal-flow layout either. We’ll see exactly what this means later in the chapter.

Floating

You are almost certainly acquainted with the concept of floated elements. Ever since Netscape 1, it has been possible to float images by declaring, for instance, . This causes an image to float to the right and allows other content (such as text) to “flow around” the image. The name “floating,” in fact, comes from the document “Extensions to HTML 2.0,” which stated:

The additions to your ALIGN options need a lot of explanation. First, the values “left” and “right”. Images with those alignments are an entirely new floating image type.

In the past, it was only possible to float images and, in some browsers, tables. CSS, on the other hand, lets you float any element, from images to paragraphs to lists. In CSS, this behavior is accomplished using the property float.

Positioning

The idea behind positioning is fairly simple. It allows you to define exactly where element boxes will appear relative to where they would ordinarily beor relative to a parent element, another element, or even to the browser window itself.

Summary

Floating and positioning are very compelling features of CSS. They’re also likely to be an exercise in frustration if you’re careless in how you use them. Element overlapping, stacking order, size, and placement all have to be considered carefully when elements are positioned, and floated elements’ relation to the normal flow must also be taken into account. Creating layouts using floating and positioning can thus take some adjustment, but the rewards are well worth the price.

While it’s true that a great deal of layout can thus be freed of tables, there are still reasons to use tables on the Web, such as presenting stock quotes or sports scores, among others. In the next chapter, we’ll examine how CSS has grown to address the question of table layout.

Source:
CSS: The Definitive Guide, 3rd Edition

16 thoughts on “CSS Tips: Floating and Positioning

  1. I can’t remember exactly when I first started using floated objects in my web designs. I had always been a big fan of tables – they were simple and easy to control. It took me awhile to finally admit that CSS was the way to go and now I code exclusively in CSS for my clients. I’ve been doing several website makeovers lately, even redoing some of my own creations. Good article!

  2. float refers to the normal text flow around a specific object (HTML tag). For example, if we set float: left in a style definition for an image object (img tag), then the text would pass at the right side of the image. It does nothing to do with the placement of the object; it deals with the flow of text around it.

    Positioning, on the other hand, refers to the placement of the object itself; that is, if we wish to put an object in the right side of the window or center, or left. If we do not specify the float, there would be no text at the right side or left side of this object (no matter where it is).

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>