Style cssFloatProperty
Style Object
Definition and Usage
The cssFloat property sets or returns the horizontal alignment of an element.
Syntax
Set the cssFloat property:
Object.style.cssFloat="left|right|none|inherit"
Return the cssFloat property:
Object.style.cssFloat
| Value | Description |
|---|---|
| left | The object/element floats to the left of the parent element. |
| right | The object/element floats to the right of the parent element. |
| none | Default. The object/element does not float. |
| inherit | The value of the cssFloat property is inherited from the parent element. |
Browser Support
All major browsers support the cssFloat property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if a !DOCTYPE is specified. IE9 supports "inherit".
Tips and Notes
Note:If there is too little space in a line for a floating element, the element will jump to the next line, and this process continues until a line with enough space is found.
Example
Example
Click the two buttons to set the image to float to the left or right of the text:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial(example.com)</title>
<script>
function floatRight(){
document.getElementById("img1").style.cssFloat="right";
}
function floatLeft(){
document.getElementById("img1").style.cssFloat="left";
}
</script>
</head>
<body>
<img id="img1" src="w3javascript.gif.html" width="100" height="132">
<p>This is a paragraph.</p>
<p>This is also a paragraph.</p>
<input type="button" onclick="floatRight()" value="Float Right">
<input type="button" onclick="floatLeft()" value="Float Left">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial(example.com)</title>
<script>
function floatRight(){
document.getElementById("img1").style.cssFloat="right";
}
function floatLeft(){
document.getElementById("img1").style.cssFloat="left";
}
</script>
</head>
<body>
<img id="img1" src="w3javascript.gif.html" width="100" height="132">
<p>This is a paragraph.</p>
<p>This is also a paragraph.</p>
<input type="button" onclick="floatRight()" value="Float Right">
<input type="button" onclick="floatLeft()" value="Float Left">
</body>
</html>
Try it Yourself »
Style Object Other Extensions