The 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 :
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.