CSS Floats

Float

An element can be placed to the left or right (of its container element) by using the float property. In the page below the image is positioned to the right of the header element and (the h1 is displayed as an inline element).

A float:right; property has been used to put the image on the right of the page

Borders are shown for demonstration only

This can be represented using the diagram to the right. The pink element of the picture has been floated to the right of the container.

Representation of using the float:right; property.

Using float for multi column layout

We want to create the following layout below. To achieve this we will need to float at least one of the divs to the right.

Using the float property

To achieve this we will place the two container elements (in this case we have used div elements) inside the main container (main element) and then float one of the sections to the left and the other to the right. We use the ID attribute to ensure that we target each div individually. You will notice that we have specified the width of the divs so that both are the same size.

Clearing floats

In the example above we used floats. The problem with floats is that they persist ( remain in place)

What has happened is instead of the footer appearing underneath the divs it has just appeared at the next available space.

We will add the clear:both; property to the footer so that the float of any elements are cleared.

footer{

clear:both;

}

The footer now starts on the left on a fresh line as can be seen below.

Next - CSS Positioning

Page updated

Report abuse