1. CREATING A LIQUID THREE
LAYOUT
Ryan Neves Philippe Roy Solanje Sellier

2. WHAT IS A LIQUID LAYOUT?
All containers are based on the viewport rather than the initial containing block. A liquid layout will move in and out when you resize
your browser window.*

3. OBJECTIVE
Create a liquid Layout with three columns using the following layout:
The layout should
- Load the same background image in three different pages.
- Position a background image in the right hand column away from the text
- Align the text in the Header to the left
- Align the text in the right hand column to the right
- Remove the line under all links, change their color to a color of your choice.
- Specify the width of the right and left column to be 300px
- Make sure you use padding and margin to create the same text flow as in the example.

4. DESIGN
Step 1. Layout
Step 2. Containers
Step 3. Attributes

5. CONTAINERS
• Createone container to div.container
{
house all other containers
width:100%;
margin:0px;
border:1px solid gray;
background: white;
}
• Add Header & Footer div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:both;
}

6. CONTAINERS
• Add inner containers div.left
{
float:left;
width:266px;
margin:0px;
padding:1em;
}
div.right
{
float:right;
width:266px;
margin:0;
padding:1em;
text-align:right;
background:url(../images/guymagglass.jpg)
no-repeat left top;
}
div.content
{
margin-left:298px;
margin-right:298px;
border-left:1px solid gray;
border-right:1px solid gray;
padding:1em;
font-family:Arial,Helvetica,sans-serif;
}

7. ATTRIBUTES
h1,h2.head
{
padding:0;
margin:0;
text-align:left;
font-family:Arial,Helvetica,sans-serif;
}
div.left
{
float:left;
• Position a background image in the right hand column away
width:266px;
from the text
margin:0px;
padding:1em;
}
div.right
• Align the text in the Header to the left {
float:right;
width:266px;
margin:0;
padding:1em;
• Align the text in the right hand column to the right
text-align:right;
background:url(../images/guymagglass.jpg) no-
repeat left top; }
div.content
• Remove the line under all links, change their color to {
margin-left:298px;
a color of your choice.
margin-right:298px;
border-left:1px solid gray;
border-right:1px solid gray;
padding:1em;
• Specify the width of the right and left column to be
font-family:Arial,Helvetica,sans-serif;
300px }
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
• Make sure you use padding and margin to create the
background-color:#ff9900;
same text flow as in the example.
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase; }
a:hover, a:active
{
background-color:#ff6600; }

8. RESOURCES
• http://www.maxdesign.com.au/articles/liquid/ *
• http://www.yourhtmlsource.com/stylesheets/
cssbackgrounds.html
• http://www.w3schools.com/css/default.asp

9. Website