Floats in Practice

Let’s make a common layout of the page with keeping the header at the top, placing 2 columns at the center and providing a footer at the bottom. This page can be marked up by utilizing elements as talked in Chapter 2. Within the element, the HTML tags will be looking like:

The and the are block-level elements, and by default, they will be stacked on top of one another. But we want them to be side by side. For this, we have to float the element to the right and the element to the left. Our CSS will be like:

section {

float: left;

}

aside {

float: right;}

Whenever an element is made to float, it will stream right to the edge of its parent elements. In case there are no such parent elements, the element which is floated will them float right to the edge of the page.

When we are floating an element, we are taking it away from its original flow provided by the HTML document. This results in the element’s width to default with the content’s width inside it. But when we are making columns for a reusable layout, this behavior is not needed. It can be made right by adding a fixed property of 'width' to each column. In addition to that, to abolish the touching of floated elements, we can provide the property of ‘margin’ to provide spaces between them.

Let’s extend the previous code and add ‘margin’ as well as ‘width’ to each column.

section {

float: left;

margin: 0 1.5%;

width: 63%;

}

aside {

float: right;

margin: 0 1.5%;

width: 30%;

}

Having just 2 columns provides the ability to float one to the right and the other one to the left. But if we are having more than two columns then we need to change our approach. Let’s say we want to have a row of 3 columns between our header and footer elements. Our HTML will be looking like:

To place these 3 elements in a 3-row column, we will float all of them on the left. Here we also need to take care of the width of the elements. The CSS will be like this:

section {

float: left;

margin: 0 1.5%;

width: 30%;

}

Thus now we are having 3 columns, each of them have equal margin and width values and all are floated to the ‘left’.

Learn HTML and CSS in 10 Days

Building Your First Web Page

Getting to Know HTML

Getting to Know CSS

CSS Properties

Opening the Box Model

Positioning Content

Working with Typography

Setting Background And Gradients

Creating Lists

Adding Media

Building Forms

Organizing Data With Tables

Writing Your Best Code

Some more HTML and HTML 5 tags

Floats in Practice

Popular Exams

Company

Resources