First in source
This three column CSS layout is a 100% height with footer layout. In this demonstration we are using Faux columns.
For further information about how this this three column 100% height CSS layout 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:
- Three column CSS layout - left and right menu. This is the basis layout for all the different layouts.
- Two column CSS layout - top and left menu
- Two column CSS layout - top and right menu
- Two column CSS layout - left and footer menu
- Two column CSS layout - right and footer menu
- Three column CSS layout: 100% height with footer. This layout is also using Faux columns.
- Three column CSS fluid layout: 100% width
- Three column CSS fluid layout: 100% width and with column borders
- Two column CSS layout - header and left menu
- One column CSS layout - top and footer menu
Related CSS articles and examples
Below are some articles that are related to these examples.
- Three column fluid CSS layout with rounded content corners and 100% height.
- CSS fluid layouts with faux columns.
You can use any of these examples for free. Hope you find them useful.