CSS Layout Techniques with Floats
Floats are the most common method of laying out a web page. They are often used in grid systems as well. There are several basic techniques to use in your CSS to create multi-column layouts. What follows is are demonstrations of the barebones techniques needed.
Demo Links
- 2 Column, Sidebar Left (view demo)
- 2 Column, Sidebar Right (view demo)
- 3 Column, Sidebar Left and Right (view demo)
- Three Column Unbalanced Layout (view demo)
- 2 Column Stretch (view demo)
Two Column Layouts
Two column layouts on the web are very common for basic sites. Generally, they consist of a header, footer and then two columns in the content area. One column is for the main content while the other is a sidebar.
The essential CSS code for a centered 2 column layout with the CSS on the left is as follows.
.container {
margin: 0 auto; /* This centers the page */
width: 90%; /* This sets our total page width */
max-width: 1200px; /* Make sure out page never gets too wide */
}
header {
width: 100%; /* This sets the header to stretch the full page width */
}
.main-content {
float: right; /* This causes the content to move to the right */
width: 70%; /* We need to set the width whenever we float an element */
}
aside {
float: left; /* This causes the sidebar to move to the left */
width: 25%; /* We need to set the width whenever we float an element */
}
footer {
clear: both; /* Make the footer clear both the sidebar and content floats */
width: 100%; /* This sets the footer to stretch the full page width */
}Here are the key points to consider for this layout:
- The header and footer are set to 100% wide so they stretch the entire width of the container.
- The content and sidebar have their widths set the adds up to less than 100%.
- The sidebar is floated to the left, the content to the right.
- The footer is set to clear floats on both sides so that it sits below the content and sidebar.
2 Column Demos
Two column layout with sidebar on the left
Two column layout with sidebar on the right
The only difference here is in the floats in the CSS. We tell the content to float to left and the sidebar to the right.
Which Way to Float?
Its important to note that either of the above layouts could also be accomplished by floating both the sidebar and content to the left (or right). In this case, order matters.
- If we float both to the left, the left most element will be the one that appears first in the source HTML
- If we float both to the right, the right most element will be the one that appears first in the source HTML
It's common to see multiple elements on a page set to float to the left.
Three Column Layout
A three column layout generally consists of a main content area in the middle and a sidebar on both the right and left sides.
Below is the basic CSS code for a 3 column layout.
.container {
margin: 0 auto; /* This centers the page */
width: 90%; /* This sets our total page width */
max-width: 1200px; /* Make sure out page never gets too wide */
}
header {
width: 100%; /* This sets the header to stretch the full page width */
}
.main-content {
float: left; /* This causes the content to move to the left */
width: 60%; /* We need to set the width whenever we float an element */
}
.aside-one {
float: left; /* This causes the sidebar to move to the left
It's going to appear to the left of the content because
we declared it first in our HTML page */
width: 20%; /* We need to set the width whenever we float an element */
}
.aside-two {
float: right; /* This causes the sidebar to move to the right */
width: 20%; /* We need to set the width whenever we float an element */
}
footer {
clear: both; /* This makes sure that the footer clears both the sidebar and content floats */
width: 100%; /* This sets the footer to stretch the full page width */
}3 Column Demo
Three column layout with sidebar on the right and left
Three Column Unbalanced Layout
The standard three column layout can be easily modified to have the sidebars both on one side to create and unbalanced feel.
Below is the basic CSS code for a 3 column unbalanced layout.
.container {
margin: 0 auto; /* This centers the page */
width: 90%; /* This sets our total page width */
max-width: 1200px; /* Make sure out page never gets too wide */
}
header {
width: 100%; /* This sets the header to stretch the full page width */
}
.main-content {
float: left; /* This causes the content to move to the left */
width: 60%; /* We need to set the width whenever we float an element */
}
.aside-one {
float: left; /* This causes the sidebar to move to the left
It's going to appear to the left of the content because
we declared it first in our HTML page */
width: 20%; /* We need to set the width whenever we float an element */
}
.aside-two {
float: left; /* This causes the sidebar to move to the left */
width: 20%; /* We need to set the width whenever we float an element */
}
footer {
clear: both; /* This makes sure that the footer clears both the sidebar and content floats */
width: 100%; /* This sets the footer to stretch the full page width */
}3 Column Demo
Three column layout with sidebar on the right and left
Two Column Stretch Layout
For lack of a better term, I'm calling this type of layout a "stretch" layout. Basically this type of layout is still centered and has a certain width, but the backgrounds of each section stretch to the edge of the page.
Below is the basic CSS code for a 2 column stretch layout.
.container {
/* We use a class for this since we're using it in several places */
margin: 0 auto; /* This centers the page in modern browsers */
width: 90%; /* This sets our total page width */
max-width: 1200px;
overflow: auto; /* contain the floats to allow us to have white background below aside
/* Note: In some instances you might have to use a clearfix instead of overflow */
}
.main-content {
float: left; /* This causes the content to move to the left */
width: 70%; /* We need to set the width whenever we float an element */
}
aside {
float: left; /* This causes the sidebar to move to the left */
width: 25%; /* We need to set the width whenever we float an element */
}
footer {
clear: both; /* This makes sure that the footer clears both the sidebar and content floats */
}
Here are the key points to consider for this layout:
- In the past, we've wrapped everything with a container and centered that container.
- This time, we leave the main elements (header, navigation, footer) on the outside, and don't declare their widths. This means they stretch to fit the page width.
- Immediately inside each of these main divs, we add a new div with the class, centerLayout.
- We use that class to center the inner parts in the normal manner.