• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 12. Box Properties > float Property

12.22. float Property

The float property determines how a specified element wraps around another “parent” element as it floats on a Web page. While it sounds simple, it is arguably one of the hardest things for browsers to get right, and at the moment no browser is fully capable of rendering it properly. The float property belongs to the CSS family of boxes and margins, and is most typically used to tell a browser where to place text either immediately before or after an image. To put things in more concrete terms, think of an image on a Web page and some text that follows immediately after it. Browsers typically place the text flush to the bottom of the image. The float property is designed to allow the Web author to have that text appear beside that image instead. This is handy, because otherwise the image would take over the Web page, especially if the image is a large one.

float can take on one of three properties: left, right and none. left displays the element to the left margin of the object specified, right displays the element to the right margin, and none sets the float value to the browser default (which should be flush with the bottom of the image). Probably the best way to understand how this works is to look at some code and then see the results. Take a look at the following code snippet, for example:


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint