Fixed layout

See more about:

Layout patterns

To the pattern list

A page layout is the way a page’s content is divided across regions.

Goals

A fixed layout stays the same width as the browser window is resized. Like this:

Fixed layout

Figure 1. Fixed layout

Implementation

Here is a fixed layout:

Fixed layout with no whitespace

Figure 2. Fixed layout with no whitespace

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>Fixed layout</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 14px;
        background-color: #ffeaff;
        width: 950px;
        margin: 5px auto 5px auto;
      }
      #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 fixed layout

Sometimes you want spacing around the regions, like this:

Fixed layout with spacing

Figure 4. Fixed layout with spacing

Use padding and margins.

<!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>Fixed layout with equal sidebar heights</title>
    <style type="text/css">
      body {
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 14px;
        background-color: #ffeaff;
        width: 950px;
        margin: 5px auto 5px auto;
        padding: 0;
      }
      p {
        margin: 0;
        padding: 0;
      }
      #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;
      }
    </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 5. Code for fixed layout with spacing

Comments

How wide to make the page? Almost all desktop and notebook computers have a screen that’s at least 1,024 pixels wide. Setting the width to 950 pixels allows for scroll bars and such.

However, mobile devices have narrower screens, like 480 pixels.

Examples

Fixed layout, no spacing

Fixed layout, spacing

Exercises

Exercise: A fixed layout

Exercise: A fixed-layout site with a slideshow

To the pattern list