How to do Liquid layout?

, , Leave a comment

This article explains one method of achieving a successful liquid layout as well as providing basic definitions of liquid, fixed-width and em-driven layouts.

 

Step 1 – Start with a layout grid

You can start by doing a grid at 800 pixels wide. Columns and gutters can be adjusted until you are happy with the layout. When happy, these pixel-based measurements are then converted to percentage units.

If you want to achieve a basic three-column layout, your sketch could look like this:

The basic column grid for this mockup is:

column percentage width
gutter 1 3%
column 1 48%
gutter 2 3%
column 2 20%
gutter 3 3%
column 3 20%
gutter 4 3%
total 100%

 

As you can see, there has been an allowance made for gutters between each column. This will add some space to the page and stop the columns from becoming too wide in very wide browser windows.

Step 2 – Leaving space

One problem with percentage widths is that they have to be calculated by the browser so there will be some degree of rounding up or down of the percentage measurements. For this reason, it is always good to leave some free space on the page so there is room for error. In this case, you will simply leave “gutter 4” undefined, so there is 3% of free space

column percentage width
gutter 1 3%
column 1 48%
gutter 2 3%
column 2 20%
gutter 3 3%
column 3 20%
gutter 4 undefined
total 100%

Step 3 – Making containers

You now have three gutters and three columns. The gutters can be converted to left margins for each of the columns:

column

margin-left

column width

total width

column 1

3%

48%

51%

column 2

3%

20%

23%

column 3

3%

20%

23%

Total

   

97%

These three columns can be converted into <div> containers. You can then apply a width, “margin-left” and “float: left” to each of them:
HTML code
 

{code}

<body>
<div id=”col1″></div>
<div id=”col2″></div>
<div id=”col3″></div>
</body>

{/code}

 

CSS code

{code}

#col1
{
float: left;
width: 48%;
margin-left: 3%;
background-color:#999;
}
#col2
{
float: left;
width: 20%;
margin-left: 3%;
background-color:#999;
}
#col3
{
float: left;
width: 20%;
margin-left: 3%;
background-color:#999;
}

{/code}

 

Step 4 – Fixing an Internet Explorer bug

You may have noticed that there is a problem with the sample above in Internet Explorer 5, 5.5 and 6 for Windows. The left margin is wider in these browsers.These browsers will sometimes double these margin widths – so a 3% left-margin will become a 6% left-margin.
All other standards-compliant browsers will render a 100px left margin, but Internet Explorer 5, 5.5 and 6 for Windows will render a 200px wide margin.
This rendering issue can sometimes cause the third column to drop below the other two columns. Luckily, there is a work-arounds for this problem. In this case you can add “display: inline” to column 1 and the double float bug will disappear in Internet Explorer 5, 5.5 and 6.. The code is now:
HTML code
 

{code}

<body>
<div id=”col1″></div>
<div id=”col2″></div>
<div id=”col3″></div>
</body>

{/code}

 
CSS code
 

{code}

#col1
{
float: left;
width: 48%;
margin-left: 3%;
background-color:#999;
display: inline;
}
#col2
{
float: left;
width: 20%;
margin-left: 3%;
background-color:#999;
}
#col3
{
float: left;
width: 20%;
margin-left: 3%;
background-color:#999;
}

{/code}

Step 5 – Adding headers and footers

The header <div> will naturally sit above these floated columns and gutters as long as it is not floated. The footer must be cleared from the floated item by applying “clear: both”. There are now 5 <div> containers on the page:
HTML Code
 
{code}
<body>
<div id=”header”></div>
<div id=”col1″></div>
<div id=”col2″></div>
<div id=”col3″></div>
<div id=”footer”></div>
</body>

{/code}

 
CSS Code
 
{code}
#header
{
margin-bottom: 10px;
background-color:#333;
}
#col1
{
float: left;
width: 48%;
margin-left: 3%;
background-color:#999;
display: inline;
}
#col2
{
float: left;
width: 20%;
margin-left: 3%;
background-color:#999;
}
#col3
{
float: left;
width: 20%;
margin-left: 3%;
background-color:#999;
}
#footer
{
clear: both;
background-color:#333;
}

{/code}

Step 6 – Working around the box model

If you want to inset text within these three columns and you want to apply padding to the containers, you need to remember that Internet Explorer 5 and 5.5 for Windows incorrectly render the box model.
One way to avoid this problem is apply padding to items within the containers rather than to the containers themselves. This can be done with a rule set such as:

{code}

h2, p
{
margin-left: 7px;
margin-right: 7px;
}

{/code}

Share this: