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


Subscribe to Full RSS Feed

RSS FeedIf you thing this article useful, please consider subscribing to our RSS Feed or e-mail updates and stay updated with us. You can also follow @JauhariNET on twitter for latest updates.


About Jauhari

This is me Nurudin Jauhari. Just human like you, I come from Gunungkidul, small place at Yogyakarta, and Today I live at Malang I was born 30/04/1980 in Ponjong, small village in Gunungkidul, Almost my time in 1 - 15 Years stay at this Village. More

This entry was posted in CSS, Design and tagged , .
Bookmark the permalink.



16 Responses to CSS Tips: Floating and Positioning

  1. thank’s you very much<<<

  2. PSD to CSS says:

    Very Nice, really enjoyable. thaks much… :)

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

  4. Prasetiwan says:

    nice … thanks for your tips. Good Site.

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

  6. Thanks, for the approval of my post.

  7. thanks……….. cool tips about css

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

  9. Love your article about CSS Tips. Thnks!

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

  11. Apheus says:

    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!

  12. ian says:

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

  13. I like css designs , thanks for sharing this details.

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

  15. Hostgator says:

    Really cool info. Thanks for details.

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>