Web page layout

You know how to make complex Web pages. You can add text, images, links, tables, nav bars, and so on.

This chapter is about how you group those elements together, to create page layouts.

Most Web pages in a site have the same visual structure, like this:

Page layout

Figure 1. Page layout

Good layouts help users.

Layouts also help site owners.

You create layouts with HTML and CSS, sometimes with a little help from JavaScript. This chapter explains how you do that.

Some advice: use a layout created by a professional Web designer, rather than build your own from scratch. Still, you need to know how layout works, so you can make existing layouts do what you want.

Web page regions

This lesson’s goals

By the end of this lesson, you should:

  • Know what Web page regions are.
  • Know what Webers typically put in each region.

A region is a visual chunk of a Web page. It contains one or more elements. Regions are usually visually distinct from other regions on the page.

Common regions

Web pages are often divided into the following regions:

Regions

Figure 1. Regions

Different things are put in different regions.

  • The top region is often used for site branding (logo and site name). There might be a horizontal nav bar. The top region is often called the header.
  • The left region usually shows a vertical nav bar. The region is also called the left sidebar.
  • The right region might show ads, or more navigation. The right region is also known as the right sidebar.
  • The bottom region might have copyright information, and another nav bar. The region is often called the footer.
  • The main content of a page usually goes in the center region.

Not all sites are like this. CoreDogs isn’t, for example. CoreDogs is like this:

Regions in CoreDogs

Figure 2. Regions in CoreDogs

But the regions in Figure 1 are common.

Here’s a layout that uses three regions.

Regions example

Figure 3. Regions

The top region has the logo, the site name, and a nav bar. The center region has a page header and content. The bottom region has a nav bar. The left and right regions are not used.

Exercise: Finding regions

Web sites use some common layout patterns. Find at least two examples of each of the following. Enter the URLs in the solution area.

Five regions
Five regions

No right region
No right region

No left region
No left region

No right or left regions
No right or left regions

Put the URLs below, like this:

Five regions:

URL 1
URL 2

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

Can't find the 'comment' module! Was it selected?

Summary

  • Web page regions are visual areas on a Web page, like top, left, and center.
  • Regions have common uses. For example, left regions are often used for nav bars.

What now?

Here’s a layout again:

Regions example

Figure 3 (again). Regions

To create this, you need to set the spacing around regions. Let’s see how you do that.

Spacing between elements

Where are we?

You make layouts by creating regions. Regions are visual chunks:

Regions example

Figure 1. Regions

One thing you need to do is set the spacing around regions. This lesson shows you how.

This lesson’s goals

By the end of the lesson, you should:

  • Know what the box model is, and how to use it.
  • Know how to set margin and padding defaults.
  • Know how CSS overrides work.
  • Know how containership affects layout.

The box model

Browsers draw HTML block elements, like <p>, <div>, and <h1>, in boxes. The boxes might not be visible, but they are still there.

The “box model” shows how boxes work. Here’s an example we looked at earlier.

Box model

Figure 2. The box model

Here’s how I created this box:

.big_margin_padding {
  margin: 20px;
  padding: 20px;
  border: dotted 2px #668014;
}
...
<img class="big_margin_padding" ...>

Figure 3. CSS for the dog box

padding is the gap between the content (an <img> tag in this case) and the border. margin is the gap between the border and the box’s edge.

This:

margin: 20px;

sets the same margin on all sides of the element: top, right, bottom, and left.

You can set the values individually for margin and padding, like this:

.different_margins {
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 0;
  margin-left: 5px;
}

Figure 4. Separate values

If a gap is zero (like margin-bottom above), you don’t need to add the px.

You can put the values on one line, like this:

.different_margins {
  margin: 20px 10px 0 5px;
}

Figure 5. Separate values on one line

How to remember which number is which? The first number is for the top, and then go clockwise from there:

Which margin is which

Figure 6. Which margin is which

This works for both margin and padding.

Exercise: Dog spacing

Here’s an image:

A dog

Figure 1. A dog

Write a page that looks like this:

Dog spacing

Figure 2. Dog spacing

The margins are all 10px. The padding is 10px on each side, except for the bottom, where it’s 30px. The border is 2px wide, dotted, with a color code of #BBBBBB.

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

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

Can't find the 'comment' module! Was it selected?

Margin and padding defaults

Browsers have defaults for margin and padding. So if you don’t specify margin and padding, the browser adds them for you.

Usually this works just fine. But when you do page layouts, the defaults can be a problem. Different browsers use different defaults, so a layout that works in one browser can look strange in another.

Webers often add “reset styles” to deal with the problem. For example, you might find this at the top of a page:

* {
  margin: 0;
  padding: 0;
}

Figure 7. A reset rule

The * is the CSS universal selector. It selects every type of tag on the page. This rule gives every element no padding and no margin.

If you do this, you might add margin and padding back to some elements, creating your own defaults for the page. For example:

* {
  margin: 0;
  padding: 0;
}
p {
  margin: 10px 0 10px 0;
}
img {
  margin: 10px;
  padding: 10px;
}

Figure 8. Reset and set known defaults

Every <p> and <img> on the page will use these values. Unless you add other rules.

Overriding

The defaults apply unless you override them for specific elements. Suppose I had this code.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>CSS Override</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: "Trebuchet MS", sans-serif;
        font-size: 14px;
      }
      img {
        margin: 20px;
        padding: 5px;
        border: 2px dotted #008000;
      }
      #beet {
        background-color: #B2C3CF;
        margin: 5px;
        padding: 5px;
        border: 3px black double;
      }
    </style>
  </head>
  <body>
    <h1>CSS Override</h1>
    <p><img id="bear" src="bear.png" alt="Bear"></p>
    <p><img id="beet" src="beet.png" alt="Beet"></p>
  </body>
</html>

Figure 9. Overrides

There are five elements on the page: an <h1>, two <p>s, and two <img>. The browser applies styles to each one, based on the CSS.

Have a look at beet, the second image in line 31. What style rules apply to it? These rules:

  • Lines 7-9: This rule applies to everything, so it applies to beet.
  • Lines 11-14: This rule applies to everything in the <body>, so it applies to beet.
  • Lines 15-19: This rule applies to all <img>s. beet is an <img>, so the rule applies to beet.
  • Lines 20-25: This rule applies to everything with an id of beet. So, of course, it applies to beet.

So all of these rules apply. But the rules conflict. For example:

  • Line 8: margin: 0;
  • Line 16: margin: 20px;
  • Line 22: margin: 5px;

What does the browser do? The answer: it applies the most specific rule. The most specific rule is the one that applies just to beet (lines 20 to 25). The next most specific rule is the one that applies to all <img>s (lines 15 to 19). The least specific rule is the one that applies to all elements on the page (lines 7 to 9).

So we would expect the browser to use line 22, and give beet a margin of 5px. Here is what the browser shows:

Overriding margin

Figure 10. Overriding margin

You can see that the gap from the left of the screen to the beet (5px, from line 22) is smaller than the gap from the left to the bear (20px, from line 16). This is what we expect.

You can try the page.

Renata
Renata

In the CSS code, the rule for beet comes after the others. Does that make a difference to what rule the browser uses?

Kieran
Kieran

No, it doesn’t make a difference. Move the #beet {} rule to the top, and it would look the same. It’s the specificity that matters.

Exercise: Spacing for dead dudes

Here are some dead dudes:

Ferdinand de Soto

Ferdinand Magellan

Francisco Pizarro

Create a page that looks like this:

Spacing for dead dudes

Figure 1. Spacing for dead dudes

The spacing around the images is 5px, except for the middle one. That’s 20px.

Use exactly this HTML:

<p>
  <img src="Ferdinand_de_Soto.png" alt="Ferdinand de Soto"><br>
  Ferdinand de Soto
</p>
<p id="magellan">
  <img src="Ferdinand_Magellan.png" alt="Ferdinand Magellan"><br>
  Ferdinand Magellan
</p>
<p>
  <img src="Francisco_Pizarro.png" alt="Francisco Pizarro"><br>
  Francisco Pizarro
</p>

Figure 2. Dead dude HTML

Use CSS overriding to redefine Magellan’s look.

Hint: Mess with the styles for <p> tags in this exercise, not the styles for the <img> tags.

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

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

Can't find the 'comment' module! Was it selected?

Containers

An important part of layout is knowing how to nest elements. You’ve already seen this in lots of examples, though you might not have noticed. But when laying out pages, you have to pay attention to nesting.

Each element is inside a container. The outer visible container is the <body> element. Everything is inside that. In your HTML, elements are inside <div>s, <p>s, <blockquote>s, and other tags.

Here’s a line from Figure 9.

<p><img id="bear" src="bear.png" alt="Bear"></p>

The <img> is contained in the <p>.

CC
CC

What about headings? Like this:

<h1>Sheltie Habits</h1>
<p>Shelties bark a lot. A <em>lot</em>.</p>

You get:

Headings

The text “Shelties bark a lot” looks like it’s contained in the section “Sheltie Habits.”

Kieran
Kieran

Good question.

The word “contained” has more than one meaning. I’m talking about structural containership. You get structural containership when HTML tags are nested inside each other.

In this code:

<h1>Sheltie Habits</h1>
<p>Shelties bark a lot. A <em>lot</em>.</p>

the <p> tag is not structurally contained in the <h1>.

CC
CC

Oh, I see. But the <em> is contained in the <p>, right?

Kieran
Kieran

Yes! The start and end of the <em> tag are both inside the <p> tag.

CC
CC

But as far as the meaning of the page goes…

Kieran
Kieran

Right! The look of the page, with the heading being in a large font, makes it clear to users that the concept in “Shelties bark a lot” belongs to the topic “Sheltie Habits.”

Renata
Renata

Because that’s what we’re used to seeing.

Kieran
Kieran

Yes, exactly. Newspapers, books, use this convention. Big text for headlines and section headings, smaller text for stuff that belongs under those headings.

But this is just a convention we’ve gotten used to. A shared habit, if you like. There’s nothing in the HTML that says that the <p> is part of the <h1>.

When a tag is contained in another, the outer tag is drawn first, and then the inner tag is drawn inside it. This means that the margins and padding applied to the outer tag move the entire inner tag around.

Let’s say we had this:

<div id="outer">
  <p id="walrus">Walrus</p>
  <div id="inner1">
    <p id="hippo">Hippo</p>
  </div>
  <div id="inner2">
    <p id="dog">Dog</p>
  </div>
  <div id="inner3">
    <p id="cat">Cat</p>
    <div id="inner3_inner">
      <p id="bird">Bird</p>
    </div>
  </div>
</div>

Figure 11. HTML containers

Everything is inside outer. Some things are nested deeply. bird is inside inner3_inner is inside inner3 is inside outer.

Here’s some CSS to go along with Figure 11.

* {
  margin: 0;
  padding: 0;
}
#outer {
  margin: 10px;
  padding: 12px;
  border: 2px dotted #B7B2CF;
}
#inner1 {
  background-color: #B2C3CF;
  margin: 20px;
  padding: 30px;
  border: 1px solid black;
}
#inner2 {
  margin: 20px;
  padding: 10px;
}
#inner3 {
  margin: 5px;
  padding: 10px;
  border: 2px #008000 dashed;
}
#inner3_inner {
  margin: 10px;
  padding: 8px;
  border: solid blue 1px;
  background-color: #CFC9B2;
}

Figure 12. CSS for the HTML containers

Here’s what you get:

Result

Figure 13. Result

The position of an element depends on its margins and padding, and the margins and padding of its containers.

Containers are also called parents. So inner3_inner is a parent of bird.

The browser gets this (line 12 of Figure 11):

<p id="bird">Bird</p>

It shows the text “Bird,” somewhere on its window. Let’s see if we can figure out how far the text “Bird” should be from the left edge of the browser’s window.

bird is inside inner3_inner. inner3_inner has a margin of 10 pixels, padding of 8, and a 1 pixel border. That’s 10 + 8 + 1 = 19 pixels so far.

inner3_inner is inside inner3. inner3 has a margin of 5 pixels, padding of 10, and a 2 pixel border. That’s 5 + 10 + 2, plus the 19 pixels we had earlier. That’s 36 pixels.

inner3 is inside outer. outer has a margin of 10 pixels, padding of 12, and a 2 pixel border. That’s 36 (from before) + 10 + 12 + 2 = 60 pixels.

So the text “Bird” should be 60 pixels from the left of the document.

Renata
Renata

The text “Bird” is inside a <p> tag:

<p id="bird">Bird</p>

Wouldn’t that add some spacing to the left?

CC
CC

Oo, oo! Can I answer?

Kieran
Kieran

OK.

CC
CC

There’s a reset:

* {
   margin: 0;
   padding: 0;
}

So the <p> has no margin or padding.

Kieran
Kieran

That’s right!

So we’ve worked out that the text “Bird” should be 60 pixels from the left. How do we tell what actually happens?

I add some JavaScript to the page. Try it. Move the mouse over each text element, and you’ll see the left and top position of each one. “Bird” is where we thought it should be. W00f!

Exercise: Where are the animals?

Go through the CSS on the animal names page. Work out what you think the top and left position of each animal name should be (for walrus, hippo, etc.). Then compare it with what the page actually does.

Below, type in the positions you worked out, and what the page actually does.

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

Can't find the 'comment' module! Was it selected?

Summary

In this lesson, you learned:

  • What the box model is, and how to use it.
  • How to set margin and padding defaults.
  • How CSS overrides work.
  • How containership affects layout.

What now?

Now you know how to add space around elements. You can use margin and padding with page regions (like top, left, right, etc.).

Now let’s see how to move regions to the left and right.

Moving regions left and right

Where are we?

You know how to add space around an element. Let’s see how you can move an element to the left or right of a page. This is how you position the left and right regions in a page layout.

This lesson’s goals

By the end of this lesson, you should:

  • Know what floating an element means.
  • Know how to set the width of floated elements.

Floating text

We talked about floating images before. You can also use the float property with entire sections of a page. This lessons digs into float a little more.

Let’s start with this page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Floating</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: "Trebuchet MS", sans-serif;
        font-size: 14px;
      }
      p {
        margin: 5px;
        padding: 5px;
      }
      #text2 {
        color: #00A000;
        border: 2px dotted #00A000;
      }
    </style>
  </head>
  <body>
    <h1>Floating</h1>
    <p id="text1">I am text 1.</p>
    <p id="text2">I am text 2.</p>
    <p id="text3">I am text 3.</p>
    <p id="text4">I am text 4.</p>
    <p id="text5">I am text 5.</p>
  </body>
</html>

Figure 1. Floatless

It looks like this:

Floatless, rendered

Figure 2. Floatless, rendered

This is normal flow. HTML elements are drawn on the page in the order they appear in the HTML file.

Let’s mess with text2. Change its CSS to:

#text2 {
  color: #00A000;
  border: 2px dotted #00A000;
  float: right;
}

Figure 3. The first float

Line 22 is new. Here’s what it produces:

The first float, rendered

Figure 4. The first float, rendered

When an element has a float, it is taken out of the normal flow. Everything below it is moved up. So when text2 floated, text3 moved up.

What happens to the floated element? It’s pushed to the left or right of the browser window, depending on whether it was float: left; or float: right;. Figure 3 used a float: right;, so text2 goes to the right.

I shrank the browser window for the screen shot.

You can try it.

Here’s what happens when I tell text2 to float: left.

#text2 {
  color: #00A000;
  border: 2px dotted #00A000;
  float: left;
}

Figure 5. Float left

Float left, rendered

Figure 6. Float left, rendered

When you float something, the normal elements wrap around the floated one. That’s what text3 and text4 are doing.

Let’s float both text2 and text3.

#text2, #text3 {
  color: #00A000;
  border: 2px dotted #00A000;
  float: right;
}

Figure 7. Two float

Two float, rendered

Figure 8. Two float, rendered

They float together.

But look carefully at the screen shot. text3 is to the left of text2. That’s because text2 was the first thing to float, and it got pushed to the right. Then text3 was floated, and it was pushed to the right. But it couldn’t go as far, because text2 was already there.

Let’s float them to the left.

#text2, #text3 {
  color: #00A000;
  border: 2px dotted #00A000;
  float: left;
}

Figure 9. Two float left

Two float, rendered

Figure 10. Two float left, rendered

I added another text element, so you could see that the wrapping was working.

Now, suppose I wanted 2 and 3 next to each other, but wanted 4 and 5 to start below them, like this:

Separating 4 and 5, rendered

Figure 11. Separating 4 and 5, rendered

I would add this rule:

#text2, #text3 {
  color: #00A000;
  border: 2px dotted #00A000;
  float: left;
}
#text4 {
  clear: left;
}

Figure 12. Separating 4 and 5, code

The clear: left; in line 25 tells the browser that there should be no floated stuff to the left of text4. This puts text4 in its own line, and everything flows normally from there.

Exercise: Conversation

Here are some images for this exercise:

CC

Renata

Create a page like this:

Conversation

Figure 1. A conversation

Start with this code:

img.conversation {
   float:
   clear:
   margin: 10px;
}
p.conversation {
   float:
   clear:
}
...
<img class="conversation" src="cc.jpg" alt="CC">
<p class="conversation">Hi, Renata. What's shakin'?</p>

clear is the key to this exercise. Think about what doesn’t have stuff to the left, and what doesn’t have stuff to the right.

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

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

Can't find the 'comment' module! Was it selected?

B things

Here’s another example that combines floating with containership and overriding. Suppose we want this:

B things

Figure 13. B things

Here’s some code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Floating</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: "Trebuchet MS", sans-serif;
        font-size: 14px;
      }
      p {
        margin: 10px;
        padding: 10px;
        clear: left;
      }
      .b_thing {
        margin-left: 20px;
        border: dotted 2px #888888;
        float: left;
        clear: none;
      }
    </style>
  </head>
  <body>
    <h1>Floating</h1>
    <p>Here are some B things.</p>
    <p class="b_thing">
      <img src="blueberries.png" alt="Blueberries" align="middle">
      Blueberries
    </p>
    <p class="b_thing">
      <img src="buffalo.png" alt="Buffalo" align="middle">
      Buffalo
    </p>
    <p>They are some B things.</p>
    <p>Did you like the B things?</p>
  </body>
</html>

Figure 14. B things code

Look at the HTML first. Lines 31 to 34 create the blueberries container. It has an image and some text.

The blueberries image and text have a border drawn around them both. This is because the border is drawn around their container, not the individual elements. The container is the <p> the image and text are inside. That <p> has class="b_thing". The class has a border (line 22).

The blueberries image and text also float together. Again, it’s because they’re in a container, and the container is floated.

Understanding that containers can be moved around is a key to making layouts. You groups elements together into a container, and then move the container where you want it.

Onward.

Lines 15 to 19 set the style for the <p> tag. All <p>s will get margins and padding, and nothing will float to their left (line 18).

Lines 20 to 25 override some of those settings for <p>s that have the class b_thing. The left margin is increased a little, a dotted border is set, and they’re floated. The clear: none; overrides the clear: left; in line 18.

Let’s explore two of these settings, so you can see why I used them. First, let’s look at the margin-left. Without it, the page looks like:

No extra left margin

Figure 15. No extra left margin

Normal paragraphs don’t have a border; only b_things do. That’s why Figure 15 looks like the border on b_things juts out to the left. It doesn’t really jut out, it just looks that way because the other <p>s don’t have borders.

I thought it looked better when the border lined up vertically with the text above and below it:

B things

Figure 13 (again). B things

So I added the extra margin space on the left of b_things.

Now let’s look at that clear. Here are the rules again.

p {
  margin: 10px;
  padding: 10px;
  clear: left;
}
.b_thing {
  margin-left: 20px;
  border: dotted 2px #888888;
  float: left;
  clear: none;
}

Part of Figure 14 (again). B things code

Suppose I dropped clear: none; (line 24):

p {
  margin: 10px;
  padding: 10px;
  clear: left;
}
.b_thing {
  margin-left: 20px;
  border: dotted 2px #888888;
  float: left;
}

Figure 16. clear:none; gone

Here’s what I would get:

clear:none; gone, rendered

Figure 17. clear:none; gone, rendered

The two b-things are no longer next to each other. Why? Because the clear: left; in the rule for the <p> tag (line 18) applies to them as well. They’re <p>s. Remember that clear: left; tells the browser not to let anything float to the left. So nothing is allowed to float to the left of the buffalo.

Adding clear:none; in line 24 overrides the clear: left; setting in line 18. But only for elements with the class b-thing.

Renata
Renata

This is starting to make my brain hurt.

CC
CC

Mine too.

Kieran
Kieran

Mine too. This can get very complicated.

In practice, when I create a new Web site, I borrow a layout from a Webber who is a CSS expert.

CC
CC

So why are we learning this?

Kieran
Kieran

Because you’ll need to change what the Weber created, to add your own branding and such. I recommend making small changes only. But you will still need to move things around.

More on this later.

Floats and widths

Earlier, we saw this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Floating</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: "Trebuchet MS", sans-serif;
        font-size: 14px;
      }
      p {
        margin: 5px;
        padding: 5px;
      }
      #text2 {
        color: #00A000;
        border: 2px dotted #00A000;
      }
    </style>
  </head>
  <body>
    <h1>Floating</h1>
    <p id="text1">I am text 1.</p>
    <p id="text2">I am text 2.</p>
    <p id="text3">I am text 3.</p>
    <p id="text4">I am text 4.</p>
    <p id="text5">I am text 5.</p>
  </body>
</html>

Figure 1 (again). Floatless

It looks like this:

Floatless, rendered

Figure 2 (again). Floatless, rendered

That dotted area. How wide is it? Let’s look at the entire browser window.

Floatless, rendered

Figure 18. Floatless, the entire window

That dotted area stretches across the entire window.

The CSS property width sets the width of an element. Like this:

width: 200px;

But what if you don’t use the width property? The browser uses the default. The default for width is to make the element stretch across the entire window. That’s why Figure 18 looks as it does.

Well, kind of. It’s a bit more complicated. The default width actually depends on whether the element is floated.

Here’s some more code.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Widths</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: "Trebuchet MS", sans-serif;
        font-size: 14px;
      }
      p {
        margin: 5px;
        padding: 5px;
        border: 2px dotted #00A000;
      }
      #text2 {
        float: left;
      }
      #text3 {
        width: 200px;
        clear: left;
      }
      #text4 {
        width: 200px;
        float: left;
        clear: left;
      }
    </style>
  </head>
  <body>
    <h1>Widths</h1>
    <p id="text1">I am text 1. No width, no float.</p>
    <p id="text2">I am text 2. No width, float.</p>
    <p id="text3">I am text 3. Width, no float.</p>
    <p id="text4">I am text 4. Width, float.</p>
  </body>
</html>

Figure 19. How width and float interact

Here’s what you get:

widths and floats rendered

Figure 20. widths and floats rendered

text1 and text2 show the differences in default widths. text1 shows that when there is no float, the default width is to stretch across the page. text2 shows that when there is a float, the default width is to take just enough space to fit the content. You won’t be able to predict the width very easily.

text3 and text4 shows what happens when you give a width. You get the width you ask for.

Exercise: Non-table Table

Here are some images to use for this exercise:

CC

CC

Renata

Renata

Create a page that looks like this:

Non-table table

Figure 1. Non-table Table

But don’t use the table tag!

Here’s some HTML to get you started:

<p class="start_of_row">
  <img src="cc1.jpg" alt="CC"><br>
  This is CC.
</p>
<p>
  <img src="cc2.jpg" alt="CC"><br>
  This is CC, too.
</p>

Figure 2. HTML

The class start_of_row starts a new row in the table. There is nothing to the left of a cell that is the first in a row.

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

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

Can't find the 'comment' module! Was it selected?

But wait, there’s…

...more. A lot more. For example, what happens when you give an element a width that’s too narrow to fit its content? Maybe you put an image that’s 250px wide into a <p> that’s only 200px wide.

Well, it depends. The image might stick outside of its container. The image might be cut off. There might even be a scroll bar! It depends on other settings.

We’re not going to go over all of the details. But I hope you’re getting that idea that CSS layout can be hard to do.

Simple modifications of an existing layout, well, you’ll be able to handle that. But doing anything complicated from scratch can be frustrating.

Summary

  • Floating an element takes it out of normal flow.
  • Floated elements move left or right. Other elements wrap around them.
  • The clear property lets you control whether things are allowed to float to the left or right of an element.
  • By default, floated elements take just enough space to show them.

What now?

So you make a layout, but it doesn’t look right. Figuring out what is causing the problem can be a pain. Could be a margin, could be a padding. Maybe a float doesn’t do what you expect.

Let’s look at some tools that can help.

Diagnosing layout problems

Where are we?

You know how to add spacing around elements, float elements to the left and right, and set element widths. You’ll use these three things to make layouts.

But it’s easy to make mistakes in CSS, and sometimes it’s hard to find out what caused the mistakes. Let’s look at some tools that can help.

This lesson’s goals

By the end of this lesson, you should know that:

  • Editors like Netbeans help you spot typing errors before they get into your code.
  • The “MeasureIt”“:https://addons.mozilla.org/en-US/firefox/addon/539 add-on helps you figure out where the browser is putting things.

Argh!!

Getting pages exactly right with CSS can be tough. Why?

CSS is hard

It’s easy to do a simple layout with CSS. But complex layout, like CoreDogs? Argh!!

CSS has lots of strange quirks. Things you think should be easy, aren’t. Like vertical centering.

Containership and overriding can lead you astray. You might think you know what rule applies to an element. But the element could be affected by a rule you hadn’t thought about.

Cross-browser problems

CSS that works in one browser might not work in another. You’ve already seen that browsers use different defaults for margin and padding. But that’s just the tip of the iceberg.

Typos

Here are some typos in code:

margins: 10px;

background_color: blue;

padding 10px 5px 10px 5px;

The errors are easy to spot in isolated lines. Put them in a 100-line CSS file, and they’re hard to find.

Here are tools that can help you find mistakes.

Editors

Some editors spot some typing errors. Here’s a screen shot from Netbeans:

Error spotted

Figure 1. Error spotted

The Netbeans editor knows that margins is not a CSS property. I meant to type margin.

Download Netbeans. This one feature will save you a lot of time.

CSS validator

You can ask the W3C’s CSS validator to check your CSS. The validator is at http://jigsaw.w3.org/css-validator/.

For example:

Validator input

Figure 2. Validator input

Validator output

Figure 3. Validator output

Firebug

Firebug is an add-on for Firefox. It does many things. One of the most useful is showing you what CSS styles the browser is using on an element.

Suppose I wanted to find out the styles that the browser applied to Bird:

What styles?

Figure 4. What styles?

I would look at the page in Firefox, then press F12 to start Firebug (assuming I’ve installed Firebug, of course). Then I’d click the inspect button:

Inspect button

Figure 5. Inspect button

As I move the mouse over different HTML elements, Firebug shows where the element is in the HTML, and what styles apply to it:

Firebug showing HTML and CSS

Figure 6. Firebug showing HTML and CSS

You should install Firebug today. It’s free.

Web developer add-on

Web Developer is another good free add-on for Firefox. Let’s look at just one of the many Good Things it does.

Suppose I’m looking at this page:

Elements

Figure 7. Elements

I want to move things about, so I want an easy way to see the elements I can set padding and margins on. I can tell Web Developer to add outlines to the block elements:

Web Developer menus

Figure 8. Web Developer menus

It will show:

Outlined elements

Figure 9. Outlined elements

Measuring

Sometimes you want to know exactly how many pixels wide something is, or what the gap is between two elements. The MeasureIt add-on is handy.

It adds a button to the Firefox status bar. Click on it:

MeasureIt button

Figure 10. MeasureIt button

Drag the mouse, and see the size:

MeasureIt output

Figure 11. MeasureIt output

Exercise: Validating CSS

Here’s some CSS:

* {
  margin: 0;
  padding: 0;
}
body {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 14px;
  background_color: #ffeaff;
  width 750px;
  margin: 5px auto 5px auto;
}
#top_region {
  background-color: #E0E0E0;
}
#left_region {
  float: left;
  width: 120px;
  background-color: #defe2;
}
#center_region {
  margin-left: 120px;
  margin-right: 120px;
  background-color: #fdffca;
}
#right_region {
  float: rght;
  width: 120px;
  background-color: #ddddff;
}
#bottom_region {
  backgound-color: #E0E0E0;
}

Figure 1. Some CSS

Check it with theW3C’s CSS validator. What problems are there?

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

Can't find the 'comment' module! Was it selected?

Summary

Errors in CSS can be hard to spot. There are tools that can help.

  • An editor like Netbeans can check your typing.
  • MeasureIt is a Firefix add-on that helps you figure out exactly how things are positioned.

What now?

All the pieces are in place. Let’s see how you can make a liquid layout.

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.)

Can't find the 'comment' module! Was it selected?

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.)

Can't find the 'comment' module! Was it selected?

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.)

Can't find the 'comment' module! Was it selected?

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.

Liquid example

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.

Fixed layouts

Where are we?

You know how a liquid layout works. You just saw how to create a new layout. Now let’s look at fixed layouts. Luckily, they’re almost the same as their liquid cousins.

What is a fixed layout?

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

Fixed layout

Figure 1. Fixed layout

Typically, the page is centered on the screen. Extra space appears to the left and right of the fixed width page.

Fixed width designs are easier to control. You know exactly how much space there is in each column.

No whitespace

Let’s make this:

Fixed layout

Figure 2. Fixed layout

It’s zoomed out, of course. The content is centered in the browser window, with extra space on the left and right.

We can take the code for the fluid layout, and only change the CSS for the <body>. Here is the complete code, without whitespace:

<!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

The CSS rule for the <body> tag in lines 11 to 17 has changed. Here’s the new rule:

body {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 14px;
  background-color: #ffeaff;
  width: 950px;
  margin: 5px auto 5px auto;
}

Figure 4. CSS rule for the <body> tag

You can try the page.

Line 14 gives the page background a (nasty) color, so you can see where the content begins and ends.

Line 15 sets the page’s width to 950px. Why 950? PC screen resolutions have some standard sizes, like 1,024px x 768px. Using 950px means that the page will fit on an 1,024px-wide screen. The extra 74px (1,024px – 950px) is for scroll bars, window borders, stuff like that.

As of January 2011, W3Schools reported that about 1% of their users had screen widths less than 1,024px.

The exception is mobile devices, which often use displays around 480px wide.

Line 16 centers the content on the screen. The line is:

margin: 5px auto 5px auto;

When you use auto for an element’s left and right margins, the browser centers the element. The element is the <body> in this case. The <body> contains everything, so the entire page is centered. W00f!

Whitespace

Earlier, you saw code for a liquid layout with whitespace between the regions.

Let’s create a fixed version of our test page. It will look like this:

Fixed with whitespace

Figure 5. Fixed layout with whitespace

It turns out to be quite easy. Just take the new CSS rule for the <body> from Figure 4, and plunk it into the code for the liquid layout with spacing. Here’s code for the entire page:

<!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 6. Code for fixed layout with whitespace

You can try it. W00f!

Exercise: A fixed layout

Create a fixed layout like this:

Fixed layout

Figure 1. Fixed layout

This is zoomed out, of course. The actual width is 750px.

The top region uses the background color #6E9CF1. The text is white.

The right region uses the background color #F6F9FB. The top and bottom borders are dotted, with the color #DDDDDD.

The bottom region is centered. The top and bottom borders are dotted. The colors are #DDDDDD and #AAAAAA respectively.

(I based this design on the design Blue Freedom at Open Source Web Design.)

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

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

Can't find the 'comment' module! Was it selected?

Summary

  • A page with a fixed layout maintains its width as the browser window changes size.
  • Creating a fixed layout requires just a small change in a liquid layout’s CSS.

What now?

You know how to make layouts like this:

Fixed with whitespace

Figure 5 (again). Fixed layout with whitespace

Maybe the page would look better if the sidebars and the center region were the same height.

Equal height sidebars

Where are we?

You know how to make fixed and liquid layouts. But there’s a problem we have to deal with.

This lesson’s goals

By the end of this lesson, you should know how make a layout’s regions have the same height.

The problem

Here’s a page using a liquid layout:

Unequal sidebar heights

Figure 1. Unequal sidebar heights

You can try it yourself. You’ll have to shrink the browser to make it look like Figure 1.

It looks OK, but the heights of the central area and the sidebars are unequal. It would be better if it looked like this:

Equal sidebar heights

Figure 2. Equal sidebar heights

You can try this one.

A solution

There is no simple way to make the heights equal in CSS.

But some jQuery code can do it. Rob Glazebrook figured it out, and made a plugin for it. I put the plugin at http://coredogs.com/resources/jquery.equalheights.js.

I changed the code a tiny bit to make it work better.

Run the plugin when the page loads. Tell it what regions you want to be equal height, and it will take care of the problem for you.

Here’s the code.

...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://coredogs.com/resources/jquery.equalheights.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function() {
    $("#center_region, #left_region, #right_region").equalHeights();
  });
</script>
...
<div id="left_region">
...
</div>
<div id="right_region">
...
</div>
<div id="center_region">
...
</div>

Figure 3. Making the heights equal

Line 3 loads the plugin. It needs jQuery to run, so you need to load jQuery first (line 2). Line 6 runs when the page loads. Make a list of the regions you want to be equal, and then call equalHeights.

Exercise: Equal heights

Here’s a sad page. The column heights are broken. (You can download the code.)

Fix it.

Upload your solution to your server. Enter the URL.

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

Can't find the 'comment' module! Was it selected?

Summary

You know how make a layout’s regions have the same height. Run the equalHeights plugin when the page loads.

Exercises: Web page layout

You should do the recommended exercises. Do the optional exercises if you want more practice.

Recommended

Exercise: Dreamy

Check out the Dreamy template from OSWD.

I adjusted the template a little, made it simpler. You can see it.

Download a zip file with the HTML, CSS, and image files.

Use the template to make a site with animal jokes. Have a home page, a page for dog jokes, another for cat jokes, and another for horse jokes. Add other pages if you want. Remember to replace the placeholders in the template (title, slogan, etc.) with appropriate content.

In the right sidebar, add images of the appropriate animal. Use public domain or otherwise free images. There are links to free image sites on the links page.

Upload your site to your server, and put the URL below.

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

Can't find the 'comment' module! Was it selected?

Exercise: Egyptian layout

Make a layout for a site about ancient Egypt. Put a header in the top region, a nav bar in the left region, and a footer in the bottom region.

Here are some background images that might be useful. They’re from GRSites.

Egyptian image

Egyptian image

Egyptian image

Also check out Webweaver and KingTutOne.

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

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

Can't find the 'comment' module! Was it selected?

Exercise: Dog site layout

Make a Web site about fictional dogs. Here are the specs:

  • At least six pages.
  • Each page with the same layout.
  • The layout should be fixed, 750px wide, centered in browser’s window. There should be a header, a footer, a right region with a vertical nav bar, and a content area.
  • The header should have a tiled background. The header should have the same text and background on all pages.
  • The navigation bar should have buttons with an animated mouse-over effect. Every page should have the same buttons.
  • The footer should use a smaller font than the rest of the page.
  • Use sans serif fonts for everything.
  • Use a monochrome color scheme with a single accent color.

One of the pages should be a faux contact form. It should have fields for:

  • Name
  • Email address
  • Message

For each field, the label should be above the field. There should be a Send button. It should validate the comment field; there must be something in the comment field (show an error message if there is not. The other fields can be empty.

The form doesn’t actually have to send a message; it’s just pretend. But you should thank the user for sending a message, after s/he clicks the Send button.

Upload your solution to your hosting account. Put the URL below.

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

Can't find the 'comment' module! Was it selected?

Optional

Exercise: Computer layout

Make a layout for a site about computer electronics. Put a header in the top region, a nav bar in the right region, and a footer in the bottom region.

Here are some background images that might be useful. They’re from GRSites.

Computer image

Computer image

Computer image

Computer image

Computer image

Use other images if you want. Choose fonts and colors that fit.

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

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

Can't find the 'comment' module! Was it selected?

Exercise: Change the blog design

Here’s the miniBLOG design from OSWD:

Original design

Figure 1. Original design

Download it, and change it to look like this:

New design

Figure 2. New design

These two images might be handy:

Logo

Body background

(This image is shrunk a little to make it fit. It’ll be bigger when you download it.)

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

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

Can't find the 'comment' module! Was it selected?