Page layout
Where are we?
You’ve learned about the first part of a site’s framework: information architecture. Let’s move on to page layout.
This lesson’s/page’s goals
By the end of this lesson/page, you should:
- Know that Web pages are often divided into regions: top, left, right, bottom, and center.
- Be able to create a liquid page layout, one that adjusts to the width of the browser window.
- Be able to create a static page layout, one that is always the same width.
Regions
Web pages are often divided into the following regions:
Figure 1. Regions
Different things can be placed in different regions.
- The top region is often used to show site branding (logo and site name), and sometimes a horizontal nav bar. It’s often called the header.
- The left region usually shows a vertical nav bar. It’s also called the left sidebar.
- The right region might show ads, or more navigation. It’s also known as the right sidebar.
- The bottom region might show copyright information, and another nav bar. It’s often called the footer.
- The main content of a page usually goes in the center region.
Not all sites are like this, of course. CoreDogs isn’t, for example. But the regions in Figure 1 are common.
Here’s how the regions might be used.
Figure 2. Regions example
In this one, the top region contains 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.
You make layouts with CSS. There are many ways to make layouts. They fall into two main categories, depending on what happens when the user resizes the browser window.
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 3. 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 4. 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.
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">
body {
font-family: Verdana, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
#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 5. 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 10 and 11, and 14 and 15 need some explanation. They are:
margin: 0;
padding: 0;
Let’s think back a bit. Remember that every HTML tag has a default style. The default is what the browser will do if you don’t give it a CSS rule. For example, if you don’t say otherwise, <h1> renders as bold text in a large, serif font. You can use CSS to change this, but if you don’t, the browser makes <h1>s large and serifed.
Just as there are defaults for font-size and font-family, there are defaults for padding and margin. By default, the browser adds a little whitespace around headings, paragraphs, and other elements. Even the <body> tag has some whitespace by default.
Unfortunately, the amount of default whitespace varies across browsers. This makes it hard to create pixel-perfect pages. Setting margin:0 and padding:0 takes care of that. It tells the browser to remove spacing entirely. Then we can add the exact spacing we want to each element.
Let’s move on. Lines 20 to 24 style the left region:
#left_region {
float: left;
width: 120px;
background-color: #defee2;
}
Line 21 uses the float property (you saw this when we talked about nav bars). 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 30 to 34 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 25 to 29:
#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.
That’s it! 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 6. Liquid layout with whitespace
Each region has both padding and margins. Remember the difference:
Figure 7. 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.
Here’s some CSS that will do the job. The rest of the page is the same as before, in Figure 5. 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 8. 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 9. 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 10. 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 11. 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 12. Good margin
Line 11 has four values. Remember that they are applied in clockwise order from the top.
Figure 13. 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 14. Center
The left and right margins in line 30 allow for the extra whitespace around the left, center, and right regions.
Stretching the left and right regions
It’s looking good, but there’s still a problem with the layout. Have a look at this.
Figure 6 (again). Liquid layout with whitespace
Notice that the left and right regions are too short. It would be better if they looked like this:
Figure 15. Correct region heights
The left, center, and right regions are all the same height.
This is hard to do with plain CSS. Fortunately, there’s a jQuery plug-in that does it for us. Remember that a plug-in is some code that extends jQuery.
The plug-in we’ll use is called equalHeights, written by Rob Glazebrook. Here’s is the entire page. You can try it.
<!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 with equal sidebar heights</title>
<style type="text/css">
body {
font-family: Verdana, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
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>
<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>
</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 16. Equal region heights
None of the CSS or anything in the <body> has changed. The changes are in two places.
First, we need to include the plug-in code. It’s in a JavaScript file, so we include it with the <script> tag, just as we include any other JavaScript file.
You could download the plug-in to your own server. But for convenience, I’ve put it in the CoreDogs resource directory. You can refer to it there. That is what this line does:
<script type="text/javascript" src="http://coredogs.com/resources/jquery.equalheights.js"></script>
You can copy-and-paste this into your own projects, if you want.
Now that we have the plug-in in the page, we need to call it.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#center_region, #left_region, #right_region").equalHeights();
});
</script>
Recall that code in $(document).ready() is run when the page is loaded and ready to go. We need to create a list of elements, and call the equalHeights() function on the list. It will make all of the elements in the list the same height.
The code $("#center_region, #left_region, #right_region") creates the list of elements. Remember that # means “find the element with id given.” So #center_region tells jQuery to find the element with the id of center_region. #left_region says “find the element with the id of left_region.” And so on.
Notice the comma (,) between the selectors. This creates a list of elements. Don’t forget the comma, or it won’t work.
So we end up with $("#center_region, #left_region, #right_region").equalHeights(). This builds a list of three elements, and calls the equalHeights() function on that list. Where is the JavaScript code for the equalHeights() function? In the file jquery.equalheights.js, that we included in line 48.
The result? All the columns are equal height. W00f!
If you want, copy the code in Figure 16 for your own projects. Adjust the width of the left and right regions as required.
Fixed layout
We’ve looked at liquid layouts, where the page expands horizontally to fill the entire browser window. Now let’s look at fixed layouts.
As you might expect, a fixed layout stays the same width as the browser window is resized.
Figure 17. 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. You can create content (like images) accordingly.
No whitespace
Let’s make this:
Figure 18. 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 padding, and without the sidebar heights made equal:
<!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">
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;
}
#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 19. Code for fixed layout
Only the CSS rule for the <body> tag in lines 7 to 14 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;
padding: 0;
}
Figure 20. CSS rule for the <body> tag
You can try the page.
Line 10 gives the page background a (nasty) color, so you can see where the content begins and ends.
Line 11 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 12 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 and sidebar heights
Earlier, you saw code for a liquid layout with whitespace between the regions, and the sidebars given equal heights. Remember that “sidebar” is another name for a left or right region.
Let’s create a fixed version of our test page. It will look like this:
Figure 21. Fixed layout with whitespace and correct sidebar heights
It turns out to be quite easy. Just take the new CSS rule for the <body> from Figure 20, 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>
<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>
</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 22. Code for fixed layout with whitespace and correct sidebar heights
You can try it. W00f!
Important advice
Layout in CSS can get very 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.
Here are two good sources for layouts. The first one is DynamicDrive. Here are some of their layouts:
Figure 23. 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.
Another good site is Open Source Web Design. Here are some of their offerings:
Figure 24. OSWD designs
OSWD has complete designs. They include graphics, font settings, etc., as well as layouts.
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 on this page for you own projects. Use them as much as you want.
Summary
You learned how to lay out a Web page.
- Web pages are often divided into regions: top, left, right, bottom, and center.
- A liquid page layout adjusts to the width of the browser window. A bit of jQuery can make the sidebars the right height.
- A fixed page layout is always the same width. Extra space goes to the left and right of the document.
- It’s best to use other people’s layouts, rather than create your own from scratch.
What now?
We’ve looked at two of the three parts of a sites framework: information architecture, and layout. Now it’s time for the last piece: look and feel.
