Liquid example

See more about:

Where are we?

You’ve seen some liquid layouts. Let’s see how you would adapt what you’ve seen to create new layout.

This lesson’s goals

Learn:

  • To create a new layout, adapt something that already works.
  • Be careful when combining pieces to make a CSS selector. Commas and spaces are different.

Old dogs

Let’s create a liquid layout like this:

Old dogs

Figure 1. Old dogs

It has most of the usual regions: top, left, center and bottom. There is no right region. The bottom region is pushed to the right, to be under the center region.

The site will be about old dogs. The typeface is serifed, to give an older-style look. The colors are monochrome, consistent with that old theme.

The top and left regions have a thin dotted border. It’s gray as well, but a little darker than the background color. It’s a subtle effect.

The code

We’ll reuse the code we made on the previous page, for a liquid layout with spacing. It’s always a good idea to take something that already works, and customize it.

Here’s 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>Old Dogs</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: serif;
        font-size: 14px;
      }
      #top_region, #left_region {
        background-color: #F0F0F0;
        border: 1px dotted #D0D0D0;
      }
      #top_region {
        padding: 5px;
        margin: 5px;
      }
      #top_region #site_name {
        font-size: 36px;
      }
      #left_region {
        float: left;
        width: 80px;
        padding: 5px;
        margin: 0 5px 5px 5px;
      }
      #left_region .menu_item {
        padding-bottom: 10px;
      }
      #center_region {
        margin: 0 5px 5px 100px;
        padding: 5px;
      }
      #bottom_region {
        padding: 5px;
        margin: 0 5px 0 100px;
        border-top: 1px #AAAAAA solid;
        font-size: 10px;
      }
    </style>
  </head>
  <body>
    <div id="top_region">
      <p id="site_name">Old Dogs</p>
    </div>
    <div id="left_region">
      <p class="menu_item">Menu item</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="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>Copyright © 2122</p>
    </div>
  </body>
</html>

Figure 2. The code

Look at the HTML first. Its structure is as before:

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

The CSS is where the magic happens. Look at this rule:

#top_region, #left_region {
   background-color: #F0F0F0;
   border: 1px dotted #D0D0D0;
}

The styles themselves are nothing new, but the selector is a little different. We want the top and left regions to have the same look. So we can combine them into a single rule.

Note the comma (,) in the selector. This makes the selector apply to both elements.

Here’s some more stuff:

#top_region #site_name {
   font-size: 36px;
}
...
<div id="top_region">
   <p id="site_name">Old Dogs</p>
</div>

site_name is contained in top_region. That’s why the selector works.

Note that there’s a space between the selector parts:

#top_region #site_name {

This tells the browser to look for site_name inside top_region.

So, when you use a comma, you select separate elements. When you use a space, you select contained (parent/child) elements.

Summary

  • To create a new layout, adapt something that already works.
  • Be careful when combining pieces to make a CSS selector. Commas and spaces are different.

What now?

Let’s look at fixed layouts, where pages stay the same size when the browser window is resized.


How to...

Lessons

User login

Log in problems? Try here


Dogs