Liquid layouts

Where are we?

You know how to set spacing around regions, and how to float regions left and right. Let’s put these things together to make complete page layouts.

This lesson’s goals

By the end of this lesson, you should:

  • Know that a Web page with a liquid layout changes its width when the browser window changes its width.
  • Know how to create liquid layouts with and without whitespace.

What is a liquid layout?

A liquid layout expands horizontally to fill the browser window. Usually it’s the center region that expands. Liquid layouts are also called fluid layouts.

Liquid layout

Figure 1. Liquid layout

Liquid layouts use as much of the browser window as they can. However, the width of the center region is unpredictable. Many designers prefer fixed layouts, where they have better control. We’ll look at fixed layouts later.

Liquid layout, no white space

Let’s start by creating a page that looks like this:

Liquid layout, no whitespace

Figure 2. Liquid layout, no whitespace

The page has five regions: top, left, center, right, and bottom. There is no whitespace between the regions, or inside the regions. We’ll change that later.

You can try the page. Resize the browser window, and watch the center region change its size.

CC
CC

When I use the Web, I maximize my browser window, and keep it that way. My guess is that most people work the same way.

Why bother making a liquid layout when people don’t change the size of their browser windows?

Kieran
Kieran

Good question! It’s not really about what happens when people resize browser windows. It’s about making the site look good for different people.

Someone might have his screen set to 1,024 pixels x 768 pixels. Someone else might have her screen set to 1,280 × 1,024. A liquid layout will adjust itself to use whatever is available on each machine.

Resizing the browser window just lets you see that a layout is adapting.

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Liquid layout</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 14px;
      }
      #top_region {
        background-color: #E0E0E0;
      }
      #left_region {
        float: left;
        width: 120px;
        background-color: #defee2;
      }
      #center_region {
        margin-left: 120px;
        margin-right: 120px;
        background-color: #fdffca;
      }
      #right_region {
        float: right;
        width: 120px;
        background-color: #ddddff;
      }
      #bottom_region {
        background-color: #E0E0E0;
      }
    </style>
  </head>
  <body>
    <div id="top_region">
      <p>Top region</p>
    </div>
    <div id="left_region">
      <p>Left region</p>
    </div>
    <div id="right_region">
      <p>Right region</p>
    </div>
    <div id="center_region">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
      ut aliquip ex ea commodo consequat. </p>
    </div>
    <div id="bottom_region">
      <p>Bottom region</p>
    </div>
  </body>
</html>

Figure 3. Code for liquid layout with no whitespace

Let’s look at the HTML first. It’s simple. Each region has its own <div> with a unique id. That’s it!

The CSS does all the work. Lines 18 to 22 style the left region:

#left_region {
  float: left;
  width: 120px;
  background-color: #defee2;
}

Line 19 uses the float property. float removes the left region from the normal flow of the HTML, and sends it to the left of the page. The width is fixed at 120px. It will stay that way as the browser window is resized.

Lines 28 to 32 style the right region:

#right_region {
  float: right;
  width: 120px;
  background-color: #ddddff;
}

It’s sent to the right, and given a fixed width.

The center region is styled by lines 23 to 27:

#center_region {
  margin-left: 120px;
  margin-right: 120px;
  background-color: #fdffca;
}

It doesn’t have a width property set, so it’s free to expand to fill the browser width. The left and right margins are set to allow for the left and right regions.

You can try the page. Resize the browser window, and watch the center region change its width. The top and bottom regions expand and contract as well, since they have no width in their CSS rules.

Exercise: Liquid, no right region

Make a page with a liquid layout and no right region. It should have top, bottom, left, and center regions. Like this:

Liquid, no right

Figure 1. Liquid, no right

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Liquid layout, white space

Let’s add some whitespace around each of the regions. We want to end up with something like this:

Liquid layout with whitespace

Figure 4. Liquid layout with whitespace

Each region has both padding and margins. Remember the difference:

Margins and padding

Figure 5. Margins and padding

Margins are outside the border of an element. Padding is inside the border of an element, between the border and the element’s content.

When we add margins and padding to regions, we may need to adjust other regions to allow for the extra space. So if we add space to the left and right regions, we need to adjust the margins of the center region.

Here’s some CSS that will do the job. The rest of the page is the same as before, in Figure 3. You can try the page.

#top_region {
  background-color: #E0E0E0;
  padding: 5px;
  margin: 5px;
}
#left_region {
  float: left;
  width: 120px;
  background-color: #defee2;
  padding: 5px;
  margin: 0 5px 5px 5px;
}
#center_region {
  margin: 0 140px 5px 140px;
  background-color: #fdffca;
  padding: 5px;
}
#right_region {
  float: right;
  width: 120px;
  background-color: #ddddff;
  padding: 5px;
  margin: 0 5px 5px 5px;
}
#bottom_region {
  background-color: #E0E0E0;
  padding: 5px;
  margin: 0 5px 0 5px;
}

Figure 6. Adding whitespace

The top region has padding and margins added:

#top_region {
  background-color: #E0E0E0;
  padding: 5px;
  margin: 5px;
}

This will add margins to all sides of the region.

The left region is immediately below the top region. We want the same sized gap above the top region and between the top and left, like this:

Margin goal

Figure 7. Margin goal

Both of the gaps are five pixels.

Suppose we used the following rule for the left region:

#left_region {
  float: left;
  width: 120px;
  background-color: #defee2;
  padding: 5px;
  margin: 5px;
}

Figure 8. Bad rule, naughty rule

This would seem to make sense. margin: 5px; in line 11 would add five pixels all around.

The problem is that the top region already has a five pixel margin below it. Add a five pixel margin to the top of the left region, and you get this:

Margin goal

Figure 9. Wrong margin

There will a 10 pixel gap between the top and left regions. Five pixels for the bottom margin of the top region, and another five pixels for the top margin of the left region.

To fix it, set the top margin of the left region to zero:

#left_region {
  float: left;
  width: 120px;
  background-color: #defee2;
  padding: 5px;
  margin: 0 5px 5px 5px;
}

Figure 10. Good margin

Line 11 has four values. Remember that they are applied in clockwise order from the top.

Margin order

Figure 11. Margin order

This fixes the problem, giving us the five pixel gap we wanted.

The same approach is used for the other regions.

The center region has been adjusted a little:

#center_region {
  margin: 0 140px 5px 140px;
  background-color: #fdffca;
  padding: 5px;
}

Figure 12. Center

The left and right margins in line 30 allow for the extra whitespace around the left, center, and right regions.

In this section, you’ve seen how you can add whitespace around regions. When you add whitespace to a floated region (like the left region), you might need to adjust the spacing of other regions (like increasing the left margin of the center region).

Borders are the same. If you add borders to the left region, you would have to think about how that affects the left margin of the center region.

Exercise: Liquid, no right region, with spacing and shadow

Make a liquid page like this:

Liquid layout

Figure 1. Liquid layout

It has top, left, center, and bottom regions. There’s a 5px gap between them.

The left region has a shadow effect. It was created by applying a 3px border to the bottom and right of the region. Here’s some CSS:

border-width: 0 3px 3px 0;
border-color: #AAAAAA;
border-style: solid;

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Variations

You can change the basic layout in many ways. Here are some possibilities.

The footer is often used for copyright notices, “About us” links, and other random things. It’s often given a smaller font, and centered on the page. Like this:

Footer centered

Figure 13. Footer changes

Here are the changes.

#bottom_region {
  background-color: white;
  padding: 5px;
  margin: 0 5px 0 5px;
  text-align: center;
  font-size: 12px;
}
...
<div id="bottom_region">
  <hr>
  <p>Bottom region</p>
</div>

Figure 14. Footer changes

Line 5 pushes the text into the center. Line 6 reduces the font size. The horizontal line is created by an <hr> in line 10.

Exercise: Making the line

Create a page that looks like this:

Layout

Figure 1. Layout

Don’t use an <hr> tag to make the line at the top of the bottom region. Instead, set the line using the CSS border property.

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Another way to change the footer is to move it under the center region, like this:

Footer under center region

Figure 15. Footer under center region

Here is the change:

#bottom_region {
  background-color: white;
  padding: 5px;
  margin: 0 5px 0 140px;
  font-size: 12px;
}

Figure 16. A different footer change

The difference is in line 4. It was:

margin: 0 5px 0 5px;

Now it’s:

margin: 0 5px 0 140px;

Just the left margin is different.

Tall left region

Sometimes the left region is as tall as the page. It includes logos and other things that are normally in headers. Like this:

Tall left region

Figure 17. Tall left region

Here’s some code:

#top_region {
  background-color: #E0E0E0;
  padding: 5px;
  margin: 5px 5px 5px 140px;
}
...
#bottom_region {
  background-color: white;
  padding: 5px;
  margin: 0 5px 0 140px;
  font-size: 12px;
}
...
<div id="left_region">
  <p id="logo">Logo</p>
  <p class="menu_item">Menu item</p>
  <p class="menu_item">Menu item</p>
  <p class="menu_item">Menu item</p>
</div>
<div id="top_region">
  <p>Top region</p>
</div>

Figure 18. Code for tall left region

Line 4 moves the top region to the right. Line 10 does the same for the bottom region.

How does the left region get so tall? There are no changes to the CSS. It’s the HTML that changes. Before, we had:

<div id="top_region">
...
</div>
<div id="left_region">
...
</div>

Now it’s:

<div id="left_region">
...
</div>
<div id="top_region">
...
</div>

The left region is floated out of normal flow, and then the top region is added. It wraps around the floated content, that is, the left region.

Top menu region

You can add new regions to layouts. For example, let’s create a separate region for the top menu, like this:

Top menu region

Figure 19. Top menu region

Here’s what we had before:

#top_region {
  background-color: #E0E0E0;
  padding: 5px;
  margin: 5px;
}

Part of Figure 6 (again). Adding whitespace

Note the changes in the whitespace. The top region has no whitespace at the bottom. The new menu region has space on all sides except for the top.

Here’s what we change the code to:

#top_region {
  background-color: #E0E0E0;
  padding: 5px;
  margin: 5px 5px 0 5px;
}
#top_menu_region {
  background-color: #F0F0F0;
  text-align: center;
  padding: 5px;
  margin: 0 5px 5px 5px;
}
...
<div id="top_region">
  <p>Top region</p>
</div>
<div id="top_menu_region">
  <p>Menu item | Menu item | Menu item</p>
</div>

Figure 20. Code for top menu region

The whitespace changes are in lines 4 and 10.

Summary

  • A Web page with a liquid layout changes its width when the browser window changes its width.
  • You learned how to create liquid layouts with and without whitespace.

What now?

Let’s see how you can create a new liquid layout for a site.


How to...

Lessons

User login

Log in problems? Try here


Dogs