Basics of CSS Float

3. CSS Float

3.2. float: right

Now let us try to make the second nested div float to the right instead. We do so by setting its float CSS property to right instead of left. Here is the code:


<!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: right; 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 it looks like when rendered in the browser:

See how the two elements are now floating in each direction inside their parent element. They are even located at the same vertical position (towards the top of the parent element). The text now wraps around the two div elements by being rendered between the div elements.