Introduction

The float CSS Layout method uses the float CSS property to move an element as far as possible to the left or right, allowing the following content to wrap around it. Floats are one of the primary tools of modern CSS based
web design, used to create multi-column layouts, navigation toolbars from lists, and table-like alignment without tables. Using this method, you can create any type of layout – fixed, fluid, elastic or even hybrid layout. The key defining factor in this technique is using percentages when specifying the dimensions of an element.

First Thoughts

To illustrate how this technique works, we shall show how to create a simple three column fixed layout using CSS. The layout we are to create is shown below.

A few things to note; in the professional world, the header, left, middle, right column and the footer contain real content not included in this template. Our aim here is to capture the general ideas of creating the layout. For example, the left column may have a navigation menu to allow easy navigation for the content in the middle column and the right column may act as a sidebar containing all sorts of relevant links or even adverts.

The layout is a fluid one, using percentages as the unit of measurement. The layout targets devices of all screen sizes, with only a single break point at 600px. At device screen widths of 600px and less, the columns will stack on top of one another. For widths greater than 600px, the columns are layed out in three columns. Designing this template begins with a fresh html5 template page having various elements containing content to be positioned and layed out using CSS. The page may be generated by a server script or manually created. This is the html template.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Positioning Layout Template</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="positioning-layout.css">
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                <h1>CSS Template using Positioning</h1>
            </div>

            <div class="main">
                <div id="left" class="column left"><h2>Left Column</h2></div>
                <div id="middle" class="column middle"><h2>Middle Column</h2></div>
                <div id="right" class="column right"><h2>Right Column</h2></div>
            </div>

            <div class="footer">
                <h2>Footer</h2>
            </div>
        </div>
    </body>
</html>

Layout Code

The code to create this layout basically uses floating to position the columns side by side on screen widths greater than 600px and a media query for screen widths less than 600px to stack the columns on top of each other. This is typical of how elements are usually positioned in responsive web design layouts – the usage of media queries and percentages as the units of measurement.

* {
	box-sizing: border-box;
}

body {
	font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
.header {
	background-color: blue;
	padding:    30px;
	text-align: center;
	font-size:  35px;
	color:      white;
}

/* Create three unequal columns that floats next to each other */
.column {
	float:   left;
	padding: 10px;
	height:  250px; /* Should be removed. Only for demonstration */
}

/* Left and right column */
.column.side {
	width: 25%;
	background-color: whitesmoke;
}

/* Middle column */
.column.middle {
	width: 50%;
	background-color: lightblue;
}

/* Always clear floats after the columns */
/* Style the footer */
.footer {
        clear: left;
	background-color: blueviolet;
	padding: 10px;
	text-align: center;
	color: white;
	font-weight: bold;
	font-size: 2em;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Styles for the header container

The header, .header has no much work on it. We can just add padding and margins. By default since .header is a block element, it occupies 100% of the body element width. As such, we don’t need to float it since its only a single column. We shall only float elements that we want to place in more than one column.

Styles for the column container

Whenever we float an element, we have to also set a width on it, otherwise the browser will assume that its width is set to 100%. Also, one has to make sure that the columns have widths that add up to 100% for them to fit exactly. If they don’t, the last column is wrapped to the next line.

Another important thing to note is that, whenever you float an element, you also need to clear the following element to make it start on a new line. So in our layout, we set the side columns to 25% each and the middle column to 50% which adds up to 100% and also cleared the .footer since its the element following the floated columns.This will make .footer start on a new line, avoiding any content overlaps.

/* Create three unequal columns that floats next to each other */
.column { 
        float: left; 
        padding: 10px; 
        height: 250px; /* Should be removed. Only for demonstration */
}
.column {
	float:   left;
	padding: 10px;
	height:  300px; /* Should be removed. Only for demonstration */
}

/* Left and right column */
.column.side {
	width: 25%;
	background-color: whitesmoke;
}

/* Middle column */
.column.middle {
	width: 50%;
	background-color: lightblue;
}

To ensure that all the columns have the same height, set an equal height on all the columns. We set it here to 250px. If you don’t set a height, the column height will be set to auto, and thus set depending on the column content and so if the content in the columns is of varying amount, the columns will have different heights.

Styles for the footer

The footer, .footer has no much work on it also. We can just add padding and margins. By default since .footer is a block element, it occupies 100% of the body element width. As such, we don’t need to float it since its only a single column. We shall only float elements that we want to place in more than one column. We also cleared the footer to start on a new line.

.footer {
	clear: left;
	background-color: blueviolet;
	padding: 10px;
	text-align: center;
	color: white;
	font-weight: bold;
	font-size: 2em;
}

To specify exact widths with recurring decimals, the calc() function becomes very useful. For example to have three columns all of equal width, we set the width of each column to width: calc(100%/n). Where, n is the number of columns to create. This works well when the box-sizing property of the columns is set to border-box