This document provides steps to create a three column liquid CSS layout: 1) It outlines the HTML structure needed with three main divs for the left, center, and right columns. 2) The CSS structure is explained which uses floats to position the columns and clear fixes for proper formatting. 3) Examples are given of how the columns rearrange responsively on different screen widths to maintain proportions.

1. How to create
a Liquid three column CSS
layout
Dan Adamo, Anna Kalimouline, Oliver C.C. Zhang,George
Lewis, Daryl Lee

2. Step 1: A picture of the layout

3. Step 2: Process of creating a
website

4. The rel attribute specifies the
relationship between the
current document and the
linked document.
The value "text/css"
indicates that the content is
standard CSS.
The href attribute specifies
the destination of a link
==
You can type in the empty
space circle in black.
We need those ids in CSS.
Step 3: The HTML structure

5. The layout width is 90% of
the window width. The
margin clears an area outside
the border of an element.
When the value is auto, it
means the browser sets and
margin.
You can add background
color. The padding clears an
area inside the border of an
element.
A floated element will move
as far to the left or right as it
can. Usually this means all
the way to the left or right of
the containing element.
Step 4: The CSS structure

6. Here the center
column(blue box) is on
the left side of the red
box.
The right column (green
box)now is on the right
side of the red box.
The clear property
specifies which sides of
an element where other
floating elements are not
allowed. The
value, “both”, means no
floating elements allowed
on either the left or the
right side.
Step 5: The CSS structure cont’d

7. The layout should remain the same proportion when you resize your browser
window.
Full Screen Narrow Screen
Step 6: Test your layout