HTML Div CSS Style Float

Updated on 16 Jan 2012,
Published on 27 Jun 2008

CSS plays an important role in current CSS based div layout web page designs. CSS float property provides the style to position the div but in a floating way. CSS style float does not affect the formatting of text placed inside the HTML div tag instead it floats the div element based on the value assigned to the float CSS property. Here we will try to learn the use of CSS float style and to observe its effect we will apply the border to div elements so that we could see the change in formatting of text and float positioning of div boundaries separately.

Div CSS Style Float Examples:

From the following links you can view the live samples of Div Float using CSS:

More on CSS Style Float

Float property style of CSS accepts following three values to set the floating position of div html tag:

1. left: Float CSS style sets the positioning of div to the left of html document. If there is already another div element in the HTML web page then both div elements become inline and try to adjust within the available space. If there is less space inline to the first div element then second div moves to next line and floats towards the left edge of web browser. Div positioning automatically floats the div element to the left position first that is coded first in the HTML page and then second div inline to the first and so on.

2. right: CSS Float style with value as right floats the div element towards the right edge of web browser. Likewise in above left value for CSS style float, div element floats to the right side and become inline to div element if there is already another div present in the HTML page. From the right hand side of web browser div element coded first is positioned first to the right and then second and so on until space available towards the left edge of web browser for the increasing ladder of div elements.

3. none: none value of CSS float style does not make effect on the floating position of div element. Basically it works similar to the left value for CSS style float.

HTML Example for Div CSS Style Float

<html>
<head>
    <title>HTML Div Float</title>
    <style type="text/css">
        #div1 {
            border: solid 1px red;
            float: right;
        }
        
        #div2 {
            border: solid 1px blue;
            float: left;
        }
        
        #div3 {
            border: solid 1px black;
            float: none;
        }
    </style>
</head>
<body>
    <div id="div1">
        Div float position right</div>
    <div id="div2">
        Div float position left</div>
    <div id="div3">
        Div float poistion none</div>
</body>
</html>

You can use the above example to learn the effect of float values like left or right to position the div element. Add more div elements with float value left or right to see the inline div elements in a queue on the HTML web page while browsing in web browser.

Output:

Get the output of above discussed code from the following links:

Div Float Left

Div Float Right

Div Float Left and Right

Continue to next tutorial: HTML Div CSS Clear Style to learn CSS Clear style porperyt and its use with Div overlay tag.

Previous Tutorial

Next Tutorial