The document provides instructions for creating a liquid three-column layout with specific formatting requirements, including positioning a background image in the right column, aligning text in the header and right column, styling links, and specifying column widths. It outlines the steps to create the necessary containers and apply attributes to achieve the desired layout using CSS. Code snippets are included to demonstrate how to structure the HTML containers and apply the appropriate CSS rules.

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