HTML - DOM Style Object cssFloat Property

Quiz

HTML DOM Style Object cssFloat property sets or returns horizontal alignment of an element. Element can float either left or right side of parent element.

Syntax

Set the cssFloat property:

object.style.cssFloat= "left | right | none | initial | inherit";

Get the cssFloat property:

object.style.cssFloat;

Property Values

Value	Description
left	It will make element float to the left side of parent element.
right	It will make element float to the left side of parent element.
none	It is the default value in which element is not set to float.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents horizontal alignment of an element.

Example of HTML DOM Style Object 'cssFloat' Property

The following example sets float value of image to left and right.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object cssFloat Property
    </title>
</head>
<body>
    <p>Click to apply cssFloat property.</p>
    <button onclick="fun()">Left</button>
    <button onclick="funTwo()">Right</button>
    <p>This is a paragraph 1</p>
    <img src="/html/images/test.png" id="float">
    <p>This is a paragraph 2</p>
    <p>This is a paragraph 3</p>
    <script>
        function fun() {
            document.getElementById("float")
                .style.float = "left"
        }
        function funTwo() {
            document.getElementById("float")
                .style.float = "right"
        }
    </script>
</body>
</html>

Supported Browsers

Property
cssFloat	Yes 1	Yes 12	Yes 1	Yes 1	Yes 7

html_dom.htm

Print Page