Javascript Reference - HTML DOM Style cssFloat Property

The cssFloat property sets or gets the horizontal alignment of an element.

Browser Support


`cssFloat`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the cssFloat property:

var v = object.style.cssFloat

Set the cssFloat property:

object.style.cssFloat='left|right|none|initial|inherit'

Property Values

Value	Description
left	shifted so that the left edge hits the left edge of the containing block or the right edge of another floating block.
right	shifted so that the right edge hits the right edge of the containing block or the left edge of another floating block.
none	not floated. Default value
inherit	Inherit the float property from the parent element

Technical Details

Default Value:	none
Return Value:	A string representing the horizontal alignment of an element
DOM Version	DOM Level 2

Example

The following code shows how to put an image float to the left/right of the text, when clicking on two buttons.


<!DOCTYPE html>
<html>
<body>
<!--from   w  w  w.j  a  v a 2  s .  com-->
<img id="myImg" src="http://java2s.com/style/demo/border.png" width="100" height="132">

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button type="button" onclick="floatRight()">Float right</button>
<button type="button" onclick="floatLeft()">Float left</button>

<script>
function floatRight() {
    document.getElementById("myImg").style.cssFloat = "right";
}

function floatLeft() {
    document.getElementById("myImg").style.cssFloat = "left";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to change the cssFloat property of a DIV element.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--from  w ww .  j  a v a  2 s . c o  m-->
    width: 50px;
    height: 50px;
    border: 1px solid black;
    background-color: coral;
    color: white;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<div id="myDIV">myDIV</div>

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim 
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea 
commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore 
te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil 
imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem 
insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes 
demonstraverunt lectores legere me lius quod ii legunt saepius.</div>
<script>
function myFunction() {
    document.getElementById("myDIV").style.cssFloat = "left";
}
</script>

</body>
</html>

The code above is rendered as follows: