First in source

Here the three column CSS layout is transformed into a two column layout with left- and footer menu. This layout DO NOT support 100% height with footer since the footer menu isn't outside the mainContainer, but faux columns are supported if you want to use that.

For further information about how this two column layout with left- and footer menu is made, take a look in the source code.

What is this about?

This example page is belonging to the article "The only CSS layout you need(?)". A three column CSS layout is by changing mainly floating, margin and padding values (no absolute positioning is used) in the CSS transformed into ten different layouts:

  1. Three column CSS layout - left and right menu. This is the basis layout for all the different layouts.
  2. Two column CSS layout - top and left menu
  3. Two column CSS layout - top and right menu
  4. Two column CSS layout - left and footer menu
  5. Two column CSS layout - right and footer menu
  6. Three column CSS layout: 100% height with footer. This layout is also using Faux columns.
  7. Three column CSS fluid layout: 100% width
  8. Three column CSS fluid layout: 100% width and with column borders
  9. Two column CSS layout - header and left menu
  10. One column CSS layout - top and footer menu

Related CSS articles and examples

Below are some articles that are related to these examples.

  1. Three column fluid CSS layout with rounded content corners and 100% height.
    1. Example: Three column fluid CSS layout: 100% height + 100% width and rounded content corners
  2. CSS fluid layouts with faux columns.
    1. Example: Three column fluid CSS layout with faux columns and 100% height
    2. Example: Three column fluid CSS layout with faux columns

You can use any of these examples for free. Hope you find them useful.