Arranging content using the float and clear properties

In this tutorial we will use the float and clear CSS properties to arrange images and text on a web page.:

    • float property – with the float property, an element can be pushed to the left or right letting other elements on the web page wrap around it. It is often used to arrange images and for div layouts.
    • clear property – with the clear property, we can specify which side or sides of an element that are floating elements aren’t allowed to be. The float property can be set to none, left, right, both, or inherit (inherit from the parent element). Setting the clear property to ‘both’ for a div means that no other floating divs can be to the left or the right of this div.

In this tutorial, we will float an image and clear a paragraph. We can float an image to the left or right and clear other content around it.

Here is an example of an image floating to the left without clearing the text.

Screen Shot 2015-05-15 at 9.03.35 am

Here is an example of an image floating to the right without clearing the text.

Screen Shot 2015-05-15 at 9.10.24 am

And here is an example of the image floating to the left and the clear property for the paragraph of text set to clear left.

Screen Shot 2015-05-15 at 9.12.44 am

Watch the video below and then scroll down to see the sample HTML and CSS code.

Here is the sample HTML code that places two divs next to each other on a page (an image to the left and text to the right side):

Here is the sample HTML code:

<html>
    <head>
        <title>Float and clear</title>
        <link rel="stylesheet" href="theme.css" type="text/css"/>
    </head>

    <body>
        <div class="image">
            <img class="photo" src="image.png" width="100%"/>
        </div>

        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </body>
</html>

And here is the CSS code:

.image{
    width: 40%;
    padding: 1%;
    float: left;
}

.content{
    width: 40%;
    padding: 1%;
    float: left;
}

The result would look like this:

floatclearexample