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. Region are usually visually distinct from other regions on the page.

Common regions

Web pages are often divided into the following 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:

Figure 2. Regions in CoreDogs

But the regions in Figure 1 are common.

Here’s a layout that uses three regions.

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.

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:

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:

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.

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:

Figure 6. Which margin is which

This works for both margin and padding.

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:

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

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

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.

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

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

What about headings? Like this:

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

You get:

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

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

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

Kieran

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

CC

But as far as the meaning of the page goes…

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

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

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:

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

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

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

Wouldn’t that add some spacing to the left?

CC

Oo, oo! Can I answer?

Kieran

OK.

CC

There’s a reset:

* {
   margin: 0;
   padding: 0;
}

So the <p> has no margin or padding.

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

• 
• 
• 
• 
• 

Exercise discussion

Comment by scotty on April 26, 2010 - 1:55pm.

How do the top positions get computed?

Comment by Kieran on April 26, 2010 - 4:31pm.

The top positions get computed from the box model. Margin top, border top, and padding top.

Check the box model stuff.

Comment by scotty on April 26, 2010 - 4:38pm.

I did and I still don't understand the math to get to 42 from top for the first element....

Comment by Kieran on April 26, 2010 - 6:50pm.

I think I see now. I had to do some research before I got it.

The top of Walrus is the top of the <p> in this code:


<div id="report">Move mouse over an element.</div>
  <div id="outer">
    <p id="walrus">Walrus</p>


The top is the height of the report div, plus any vertical space added by outer, plus vertical space added by the walrus p.

walrus top = report height + outer space + walrus space

"Outer space." Ha!

outer space is from this:


#outer {
  margin: 10px;
  padding: 12px;
  border: 2px dotted #B7B2CF;
}


So outer space is 10 + 12 + 2 = 24.

Because of:


* {
  margin: 0;
  padding: 0;
}


walrus adds nothing of its own, because the <p> has no padding and no spacing.

walrus top = report height + 24 + 0

So, we've accounted for 24px. Where are the other 18 (42 - 24 = 18)? From report.

Now, all text on the page is 14px high, from the body CSS rule: font-size: 14px;. So the text in report should be 14 pixels high.

But we need 18 pixels. Where are the other four pixels?

When the browser draws a line of text, it allows spacing for letters with ascenders (e.g., t, and l, that are higher than most letters), and descenders (e.g., g and j, that drop below most letters. That's all done in 14px.

But what would happen if the word "jacked" was above the word "home"? The descender in j would collide with the ascender in h.

So, browsers add a little extra space called "leading" between the lines. On our page, browsers add two pixels above and two below.

Read more about this stuff here.

So that's where the extra 4 pixels come from: the leading.

Man, everything is so complicated!

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

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:

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:

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

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

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

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:

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.

B things

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

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:

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:

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:

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

This is starting to make my brain hurt.

CC

Mine too.

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

So why are we learning this?

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:

Figure 2 (again). Floatless, rendered

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

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:

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.

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

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.

• W3C’s CSS validator can check your CSS.

• The Firebug and Web Developer add-ons for Firefox help you find CSS mistakes.

• 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:

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:

Figure 2. Validator input

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:

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:

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:

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:

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:

Figure 8. Web Developer menus

It will show:

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:

Figure 10. MeasureIt button

Drag the mouse, and see the size:

Figure 11. MeasureIt output

* {
  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;
}

Summary

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

• An editor like Netbeans can check your typing.

• W3C’s CSS validator can check your CSS.

• Firebug and Web Developer are Firefox add-ons that let you inspect things on a page.

• 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 layout are also called fluid layouts.

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:

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

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

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.

Liquid layout, white space

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

Figure 4. Liquid layout with whitespace

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

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:

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:

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.

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.

Variations

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

Footer changes

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:

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.

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

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:

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:

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:

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 left and right 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.

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:

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: 750px;
        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: 750px;
  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 750px. Why 750? PC screen resolutions have some standard sizes, like 800px x 600px, and 1,024px x 768px. Using 750px means that the page will fit on an 800px-wide screen. The extra 50px (800px – 750px) is for scroll bars, window borders, stuff like that.

Actually, 750px is conservative. As of January 2009, W3Schools reported that only 4% of their users had a width of 800px. Almost everyone uses a resolution of at least 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:

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. Here is 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: 750px;
        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 and correct sidebar heights

You can try it. W00f!

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?

When you design a new site, it’s a good idea to base it on something that already exists. Let’s talk about that some more.

Reusing an existing layout

Where are we?

You know how to create layouts. But it’s better not to.

This lesson’s goals

By the end of this lesson, you should:

• Know that it’s better to reuse an existing layout than create a new one from scratch.

• Know two good sources for free designs.

Reduce, reuse, recycle

Layout can get complex. When you try laying out your own pages for real, you quickly find that CSS does things you don’t expect.

For example, the vertical margins between two elements will be collapsed, unless you are floating an element, and then the margin of the inner margin gets applied to the outer one, if it is larger, unless there’s padding as well, in which case it doesn’t, unless there’s a full moon, except if Frau Balckenfeld takes the number 17 bus in Berlin to visit her sister.

OK, I made up the last two things, but the others are true. The point is, it will drive you crazy trying to get a layout right. You’ll end up pulling out your own fur in frustration.

Over the years, I’ve found a good solution: give up. I no longer try to create layouts for real sites from scratch. Instead, I use a layout that someone else has created. There are many experts in CSS layout, who make their living doing just that. Some make their layouts freely available.

When I create a new site, I copy a layout, and adapt it to my needs. Of course, I only use layouts that the author has said I can use.

Where to get layouts?

Here are two good sources for layouts. The first one is DynamicDrive. Here are some of their layouts:

Figure 1. DynamicDrive layouts

The layouts are bare-bones. They don’t have graphics, or anything else, just regions laid out in various ways. Choose the one you want, download it, and customize it.

Bare-bones layouts are good when you need to use specific branding. For example, if you’re making a site for your local high school, you already have a logo and maybe some colors that you have to use.

When you don’t have such constraints, consider using a complete design that includes graphics. A good source is Open Source Web Design. Here are some of their offerings:

Figure 2. OSWD designs

One of the OSWD designs might look familiar. Hmmm… Where have I seen that before?

Before I start using a layout or design, I open it up and look at the CSS. I want to see CSS that is simple, and that I can understand. Then I’ll be able to change it to do what I want. The design I adapted for CoreDogs – from nodethirtythree design – met those criteria.

I highly recommend that you use an existing layout or design. It will save you much anguish.

By the way, you can copy any of the layouts in CoreDogs for your own projects.

Summary

• It’s better to reuse an existing layout than create a new one from scratch.

• Two good sources for free designs are DynamicDrive and Open Source Web Design.

What now?

On to some exercises!

Exercises: Web page layout