CSS Reference

"float" - css property (v. css 1)

  • This property specifies whether a box should float to the left, right, or not at all.
  • It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.
  • Initial value: none
  • The property is not inherited
  • HTML usage: all elements
  • Browsers that support the float - property :
    Internet Explorer Mozilla Firefox Opera Google Chrome Apple Safari

Possible float values:

float value Comments CSS
left The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top. 1
right Similar to 'left', except the box is floated to the right, and content flows on the left side of the box, starting at the top. 1
none The box is not floated. 1
inherit Will inherit the value from parent specification. This property value is new with CSS 2. 2

The three properties that affect box generation and layout interact as follows:

display value position value float value Comments
'none' Based on display value UA should ignore this Based on display value UA should ignore this The element generates no box
Based on position value: se table below. 'absolute' or 'fixed' Based on position computed value to be 'none' The position of the box will be determined by the 'top' , 'right' , 'bottom' and 'left' properties and the box's containing block.
Computed value: se table below. 'static' or 'relative' other than 'none' The box is floated.
Computed value: se table below. The element is the root element.
Apply as specified. All other cases.

Computed value based on specified value for display property under certain conditions:

Specified value Computed value
inline-table table
inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block block
others same as specified

Property "float" example:

<!DOCTYPE HTML >
<html  >
  <head>
    <title>Test</title>
    <script type="text/javascript" >
    </script>
    <style   type="text/css">
      .win { font-size:12px; background-color: #DDDDDD;
             width: 400px; height: 200px; }
      .tl  {float: left; margin: 4px 4px 4px 4px;
            width: 226px; background-color: #FFFFDD;}
      .tr  {float: right; margin: 4px 4px 4px 4px;
            width: 148px; background-color: #CCCCFF;}
      .fl  { width: 70px; height: 40px;
             margin: 4px 4px 4px 4px;
             float: left; background-color: #FFFFDD;}
      .fr  { width: 70px; height: 40px;
             margin: 4px 4px 4px 4px;
             float: right; background-color: #CCCCFF}
      .cb  {clear:both;}
    </style>
  </head>
  <body >
    <div class="win">
      <div class="fl">1. float left</div>
      <div class="fl">2. float left</div>
      <div class="fl">3. float left</div>
      <div class="fr">4. float right</div>
      <div class="fr">5. float right</div>
      <div class="tl cb" >(float: left;clear:both)
        Before you print a file on a Unix system, you may
        want to reformat it to adjust the margins,
        highlight some words, and so on. Most files
        can also be printed without reformatting ...
      </div>
      <div class="tr " >
        float: right
        <ul>
          <li>Unix system</li>
          <li>PostScript</li>
          <li>printing itself</li>
        </ul>
      </div>
      <div class="fl cb">6. float left (clear:both)</div>
      <div class="fl">7. float left</div>
      <div class="fl">8. float left</div>
      <div class="fr">9. float right</div>
      <div class="fr">10. float right</div>
    </div>
  </body>
</html>

Javascript access:

// To SET values ([o] is the target object)
[o].style.float="float value"
// To GET values you must first get the computed style object
// To get that object in IE or Opera:
var cStyle=[o].currentStyle;
// To get that object in Firefox, Chrome or Safari (w3c-type):
var cStyle=window.getComputedStyle([o],null)
// To GET the property value:;
var value=cStyle.float;
/* IE, Firefox and Opera will return
   "undefined". Chrome and Safari will return
   the preset value. */
© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.