A Super Simple 2-Column CSS Layout

Two column or multiple column layout is very common these days in web design. This tutorial will bring you a super simple way to create a reusable 2 column layout with CSS. Yes, we want our code to be reusable.

Basic HTML code and CSS

div.twoCols is a container to hold the two columns: div.leftCol and div.rightCol. Each column takes 50% of width of parent element by default.

Try it »

left
right

Demo:

left
left
left
left
right
right
right
right
Note: For demostration purpose, some CSS inline styles are added to specify background colors and width.

Reuse the code in page layout

Two column layout is probably the most popular web page layout. To create a web page, a header div on the top and a footer div at the bottom will be inserted. Each area is illustrated with different background colors. The width of left column is changed to 20%; and right column to 80%.

Try it »
Header
left
left
left
left
right
right
right
right

Demo

Header
Menu item
Menu item
Menu item
Menu item
Menu item
Menu item
In ipsa praetura nihilne existimas inter tuam et huius sortem interfuisse. Supplices aliqui veniunt miseri et calamitosi, sceleratus et nefarius fueris, si quicquam misericordia adductus feceris. Quinctius? Catilinae quam isti qui illum exercitum deseruisse dicuntur. Nonis Febr. Lucullo, fuit, qua in legatione duxit exercitum, signa contulit, manum conseruit, magnas copias hostium fudit, urbis partim vi, partim obsidione cepit, Asiam istam refertam et eandem delicatam sic obiit ut in ea neque avaritiae neque luxuriae vestigium reliquerit, maximo in bello sic est versatus ut hic multas res et magnas sine imperatore gesserit, nullam sine hoc imperator! Naevi, te rogo.

Reuse the code in nested layout

3-column layout can be considered as one 2-column layout with another 2-column layout inside. It is nested layout.

Try it »
left
left
left
left
right
Nested left
Nested left
Nested left
Nested left
Nested right
Nested right
Nested right
Nested right
Nested right

Demo

left
left
left
left
right
Nested left
Nested left
Nested left
Nested left
Nested right
Nested right
Nested right
Nested right
Nested right

At last, hope you enjoy the tutorial.