CSS Tips: Floating and Positioning

Jauhari

16 comments

Link

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, b5. 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

Share:

Related Post

16 responses to “CSS Tips: Floating and Positioning”

  1. Vina Delouise Avatar

    This site is great!

  2. Hostgator Avatar

    Really cool info. Thanks for details.

  3. facebook backgrounds Avatar

    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).

  4. Unmetered VPS Avatar

    I like css designs , thanks for sharing this details.

  5. ian Avatar

    cool.. thanks for sharing this tips for css designing..

  6. Apheus Avatar

    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!

  7. eCommerce Web Solution Avatar

    CSS has become primary need for a website, so the post like this is really helpful for us!

  8. KeywordToolExternal Avatar

    Love your article about CSS Tips. Thnks!

  9. Real estate chennai Avatar

    The power of this feature is both obvious and surprising. It should not shock you to learn that user agents support this element of CSS2 better than many others.

  10. Binod Chourasia Avatar

    thanks……….. cool tips about css

  11. Binod Chourasia Avatar

    Thanks, for the approval of my post.

  12. online lead generation Avatar

    Jauhari this is really useful tip for web designers.Floating and positioning is excellent features of css.There is no doubt css would be helpful for developing search engine friendly..

  13. Prasetiwan Avatar

    nice … thanks for your tips. Good Site.

  14. PSD to Joomla Avatar

    Css is primary need to create a web site. This is really usful for web design.Floating and Positioning is excellent for CSS.

  15. PSD to CSS Avatar

    Very Nice, really enjoyable. thaks much… :)

Leave a Comment