Floating Elements in the Window

In addition to being able to exactly position elements within the document, CSS also allows you to set how an element interacts with other elements by floating it.

With HTML you can make text flow around a graphic using the align property. CSS takes this technique one step further by letting you flow text not only around graphics, but around any element. You accomplish this feat using the float property (Table 7.5).

Table 7.5. Float Values




IE4, FF1, S1, O3.5, CSS1


IE4, FF1, S1, O3.5, CSS1


IE4, FF1, S1, O3.5, CSS1

In this example (Figures 7.9 and 7.10), the menu floats to the left so that the header flows around it on the right, while the drop-box floats to the right, with text floating around it to the left.

Figure 7.9. Without floating, the menu stretches across the top of the page, and the drop box has text above and below it, but not beside.

Figure 7.10. The text in the page now wraps to the right of the menu and to the left of the drop-box. Notice, though that even the chapter title and copy text is floating for the first few lines around the menu. Check out the next section to learn how to clear that up.

To float an element:



Start your definition by typing the float property name, followed by a colon (:).

In this example (Code 7.5), I applied float to an image, which has the same effect as setting the align property in the <img> tag.

Code 7.5. The float property allows either a block of text and/or a graphic to have the following elements wrap horizontally around it.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Floating Elements in the Window</title>         <style type="text/css" media="screen"> h1, h2 {      color: #999; } img {      margin: 4px;      display: block; } #navigation {      float: left;      margin: 0px 8px 16px 0px;      background-color: #ccc;      font: small Arial, Helvetica, sans-serif; } #navigation a {      padding: 2px 4px;      border-top: 3px solid #fff;      text-decoration: none;      display: block;      color: red; } #navigation a:hover {      border-top: 3px solid #999;      color: red;      background-color: #fff; } #copy {      width: 700px;      height: 300px;      overflow: auto;      border: 3px solid red; } .author {      margin-top: 0cm;      font: bold 1em Arial, Helvetica, sans-serif; } .chapterTitle {      display: block;      font-size: smaller;      color:black; } .dropBox {      float: right;      width: 296px;      padding: 6px;      border: 1px solid #f66;      margin: 0px 0px 8px 8px;      font: small Arial, Helvetica, sans-serif; } </style> </head> <body> <div > Flip To Chapter: <a href="#">Down the Rabbit-Hole </a> <a href="#">The Pool of Tears </a> <a href="#">A Caucus-Race and a Long Tale </a> <a href="#">The Rabbit Sends in a Little Bill </a> <a href="#">Advice from a Caterpillar </a> <a href="#">Pig and Pepper </a> <a href="#">NEXT &rArr; </a> </div> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER VII      <span > A Mad Tea-Party</span> </h2> </div>         <p>There was a table set out under a tree in front of the house, and the March  Hare and the Hatter were having tea at it...'</p> <div >         <img src="/books/3/292/1/html/2/alice25.gif" height="219" width="288" alt="Alice in Wonderland" />         A mad tea-party indeed! </div>         <p>The table was a large one, but the three were all crowded together at one  corner of it...</p> </body> </html>



Next, type a keyword to tell the browser on which side of the screen the element should float. Choose one of the following:

  • right aligns this element to the right, of other elements causing subsequent elements to wrap horizontally on the left of this element.

  • left aligns this element to the left of other elements, causing subsequent elements to wrap horizontally on the right of this element.

  • none overrides floating for this element.


  • Floating elements within other elements can often have odd consequences if both the child and parent are block elements. The child tends to ignore the height of the parent, which can have undesirable consequences (sounds like a child). The upshot is that the child element will appear to begin in the parent element, but then overlap the parent's border.

  • You can use float with any tag, not just images, to cause text to float around it, so you can have text floating inside other text.

  • In Chapter 21, I'll explain how to use the float property to set up separate columns to replace traditional table-based layout.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net