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: 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:
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:
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.)
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:
Figure 5 (again). Fixed layout with whitespace
Maybe the page would look better if the sidebars and the center region were the same height.