Update Blog

Jauhari.NET menyajikan Informasi Cepat, Tepat dengan sajian Menarik

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