The only CSS layout you need

One of the arguments for switching from the table-based layout into CSS-based layouts is the flexibility CSS gives us. However, despite the flexibility, you have maybe experienced that the CSS layout you normally use didn’t handle a specific case so you still had to edit, or perhaps totally restructure your HTML?

In this article, you are presented with ten different layouts with example pages, all based on the same HTML. The most popular layout is a two-column CSS layout – top and right menu.

This layout fits educational and news-related websites such as educatetheusa.com. On the other hand, a three-column CSS layout is popular between the webshops.

This article and the example pages are perhaps not the universal answer so the title is maybe a little bit overstated, but hopefully, they can make it easier for someone.

Furthermore, all the pages are also experiments in how to change a layout without having to use absolute positioning since this takes the element out of the page flow. The changes in layout are made by changing mainly floating, margin and padding – no absolute positioning is used.

On the example pages, you will find a short description of the page, and if you look in the source code everything is hopefully clearly explained.

As you can see in the images below the different elements in the layout have different colors for better visualization.

Three column CSS layout – left and right menu

Supports 100% height: Yes
Supports Faux columns: Yes

Two-column CSS layout – top and left menu

Supports 100% height: Yes
Supports Faux columns: Yes

Two-column CSS layout – top and right menu

Supports 100% height: Yes
Supports Faux columns: Yes

Two-column CSS layout – left and footer menu

Supports 100% height: No
Supports Faux columns: Yes

Two-column CSS layout – right and footer menu

Supports 100% height: No
Supports Faux columns: Yes

Three column CSS layout: 100% height with footer

Supports 100% height: Yes, this is a 100% height layout
Supports Faux columns: Yes, this layout is made with Faux columns

Three column CSS fluid layout: 100% width

Supports 100% height: Yes
Supports Faux columns: No

Three column CSS fluid layout: 100% width and with column borders

Supports 100% height: Yes
Supports Faux columns: No

Two-column CSS layout – header and left menu

Supports 100% height: Yes
Supports Faux columns: Yes

One column CSS layout – top and footer menu

Supports 100% height: No
Supports Faux columns: Yes

About the concept and the HTML

The HTML and the concept used is a (tiny) rewritten version of Ordered Borders Layout (OBL) found at Position Is Everything, so if you know that solution the HTML and some of the CSS should look familiar. The reason for rewriting it was mainly that OBL didn’t support 100% height and Faux columns didn’t fit directly into the CSS concept.

The reason for using OBL is simply because the content comes first in the HTML code (after the header, before the menu/columns) which may benefit search engines, screen/speech readers, and smartphones.

CSS fluid layouts with faux columns

The faux column is a method of making CSS columns appear equal in length, regardless of the content that they contain. The method was originally developed for fixed-width layouts, but the concept can also be used on fluid layouts. This article explains how to use faux columns on fluid layouts with two different examples.

CSS fluid layouts with faux columns

Faux column is a method of making CSS columns appear equal in length, regardless of the content that they contain. The method was originally developed for fixed-width layouts, but the concept can also be used on fluid layouts. This article explains how to use faux columns on fluid layouts with two different examples.

One thing many people struggle with regarding CSS is the fact that elements only stretch vertically as far as they have to.

The method developed to get around this problem is called Faux columns, and the solution is simply to use a vertically tiled background image to create the illusion of colored columns with equal height.

As mentioned this method was originally developed for fixed-width layouts, in this article the method is used on fluid layouts. This is not the first article published about fluid layouts with faux columns, but the reason for writing this article is that a while ago an article called The only CSS layout you need(?) was published here at Strictly CSS. This article and the examples are a follow-up to that article and are based on the same HTML/CSS.

How a fluid layout width faux columns are made

The concept for both examples below is that we are using two different images, one for the left column and one for the right column, and make them repeat themselves vertically.