In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > styleFloat

cssFloat style property | styleFloat style property

Browser support:

cssFloat

styleFloat

Specifies or returns the horizontal alignment of the object.

With this property you can enable floating on the left or right side of an element. If float is set, the display property is ignored and the element is shown as a block-level element. Block element means that by default the entire line where the element appears is reserved. With the styleFloat property you can specify which side of the element HTML content may appear on.

Syntax:

object.cssFloat;
object.styleFloat;

You can find the related objects in the Supported by objects section below.

cssFloat:	This property is read/write.
styleFloat:	This property is read/write.

CSS page for this property: float

Possible values:

The type of this property is string.

One of the following values:

inherit

Takes the value of this property from the computed style of the parent element.

left

Surrounding content flows to the right of the element.

none

Default. The element is not floated.

right

Surrounding content flows to the left of the element.

Default: none.

Example HTML code 1:

This example illustrates the use of the float property:

<head>
    <style>
        .floating {
            float: left;
            background: cyan;
            height: 30px;
        }
        .clear {
            clear: left;
        }
    </style>
</head>
<body>
    <i class="floating">Floating element</i>
    <div class="clear">
        This sentence forbids floating elements on the left side.
    </div>

    <br /><br />
    
    <i class="floating">Floating element</i>
    <div>
        This sentence does not forbid floating elements on the left side.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the styleFloat and cssFloat properties in JavaScript:

<head>
    <style>
        .floating {
            float: left;
            background: cyan;
            height: 50px;
        }
        .clear {
            clear: left;
        }
    </style>

    <script type="text/javascript">
        function ChangeFloating (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var selectState = selectTag.options[whichSelected].text;

            var floatTest = document.getElementById ("floatTest");

            if ('cssFloat' in floatTest.style) {
                floatTest.style.cssFloat = selectState;
            }
            else {
                floatTest.style.styleFloat = selectState;
            }
        }

        function ChangeClear (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var selectState = selectTag.options[whichSelected].text;

            var clearTest = document.getElementById ("clearTest");
            clearTest.style.clear = selectState;
        }
    </script>
</head>
<body>
    <i id="floatTest" class="floating">Floating element</i>
    <div id="clearTest" class="clear">Change the relation of this sentence and the floating element with the drop-down list.</div>

    <br />
    <table cellpadding="5px">
        <thead>
            <th>Floating style</th>
            <th>Clear type of the sentence</th>
        </thead>
        <tbody>
            <tr>
                <td align="center" valign="top">
                    <select onchange="ChangeFloating (this);" size="3">
                        <option />none
                        <option selected="selected"/>left
                        <option />right
                    </select>
                </td>
                <td align="center" valign="top">
                    <select onchange="ChangeClear (this);" size="4">
                        <option />both
                        <option selected="selected"/>left
                        <option />right
                        <option />none
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
</body>