3. CSS Float


          The CSS float property can make HTML elements float to the left or right inside their parent element. Content inside the same parent element will move up and wrap around the floating element.

          To illustrate how the CSS float property works, let us first look at an HTML example below: The HTML code contains a div element which has a text, two div elements and another text.


<!DOCTYPE html>
    <html>
        <head>
            <title>Module 5.6</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="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>

inside its body. When rendered, the output below shows how it looks like:


Next is to make the two nested div elements floats left and right inside their parent element using the CSS float property.