3. CSS Float

3.1. float: left


          Now, let us try to make the first nested div element float left using the float CSS property. we do so by setting the CSS float property of the HTML element to the value left. Here an example showing a div element with the CSS float property set to left.



<!DOCTYPE html>
    <html>
        <head>
            <title>Module 5.</title>
        </head>
    <body>
        <div style="border:1px solid #cccccc;">
They went down, down, down, till at last they came to a passage
with a door at one end, which was only fastened with a latch.
The eldest Princess opened it, and they found themselves
immediately in a lovely little wood, where the leaves were
spangled with drops of silver which shone in the brilliant
light of the moon.

            <div style="float:left; background-color:red; color:white;"> This is box 1 </div>

            <div style="background-color:green; color:white;"> This is box 2</div>
They next crossed another wood where the leaves were sprinkled
with gold, and after that another still, where the leaves
glittered with diamonds. At last the Star Gazer perceived a
large lake, and on the shores of the lake twelve little boats
with awnings, in which were seated twelve princes, who,
grasping their oars, awaited the princesses.
        </div>
    </body>
</html>

Here is what the example looks like with the left floating element when rendered in the browser:


          Notice how the first div element (with the red background) now floats to the left inside its parent element. The first text is now wrapping nicely around the first div element, to the right of it. The second div element is still positioned below the first div element, and the last text below that.

          Now, let us try to make the second nested div float left too. Here is what the code looks like.



<!DOCTYPE html>
    <html>
        <head>
            <title>Module 5.</title>
        </head>
    <body>
        <div style="border:1px solid #cccccc;">
They went down, down, down, till at last they came to a passage
with a door at one end, which was only fastened with a latch.
The eldest Princess opened it, and they found themselves
immediately in a lovely little wood, where the leaves were
spangled with drops of silver which shone in the brilliant
light of the moon.

            <div style="float:left; background-color:red; color:white;"> This is
        box 1 </div>

            <div style="float: left; background-color:green; color:white;"> This
        is box 2</div>
They next crossed another wood where the leaves were sprinkled
with gold, and after that another still, where the leaves
glittered with diamonds. At last the Star Gazer perceived a
large lake, and on the shores of the lake twelve little boats
with awnings, in which were seated twelve princes, who,
grasping their oars, awaited the princesses.
        </div>
    </body>
</html>


And here is what the code looks like when rendered in the browser:


          Now both the first and second nested div element is floating to the left inside their parent element. The text wraps nicely around the two-floating element.