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!
Exercise: A fixed layout
Create a fixed layout like this:
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.)
You can see my solution, but don’t look at the source code until you do it yourself!
Upload your solution to your server. Put the URL below.
(Log in to enter your solution to this exercise.)
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.