How to Create a One-Column Page with Twenty Ten WordPress Theme
Follow Updates on the WordPress Blog Module in the Dashboard
How to Use the WordPress Custom Fields Interface

How to Design a WordPress Website with a Fixed Width

In WordPress, a fixed width website has a container that’s a set width, in pixels, and everything within it remains contained within the width defined in the Cascading Style Sheet (CSS). If a fixed width container is set to 960 pixels, it doesn’t move wider than 960 pixels, no matter what the visitor’s screen size is. If a visitor browses at a 1600-pixel-width resolution, the website displays a 960-pixel-width container.

The header and footer of this site are 960 pixels wide; the content area is 520 pixels wide; the two sidebars are 200 pixels wide; and the content area and first sidebar are separated by 20-pixel right margins.

image0.jpg

The CSS for the layout looks something like this:

body {
background: #ffffff;
margin:0;
font-family: arial, verdana, helvetica, sans-serif;
}
#container {
width: 960px;
margin:0 auto;
}
#header {
width: 960px;
height: 100px;
margin-bottom: 20px;
background: #eee;
}
.content {
width: 520px;
margin-right: 20px;
float:left;
background: #eee;
}
.sidebar1 {
width: 200px;
margin-right: 20px;
float:left;
background: #eee;
}
.sidebar2 {
width: 200px;
float:left;
background: #eee;
}
#footer {
float:left;
width: 960px;
height: 100px;
margin-top: 20px;
margin-bottom: 20px;
background: #eee;
clear:both;
}

And the HTML markup for the layout looks like this:

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>Your Site Title</title>
</head>
<body>
<div id="container">
<header>This is the Site Header</header>
<div class="content">
<p>This is the content area</p>
</div>
<div class="sidebar1">This is the first sidebar</div>
<div class="sidebar2">This is the second sidebar</div>
<div id="footer">This is the footer area</div>
</div>
</body>
</html>

A 960-pixel-wide layout is the most popular, and most standard, fixed width layout because designers create sites with the assumption that 1024 x 768, or greater, is the most popular screen resolution in use. So a 960-pixel-wide layout appears perfectly on a 1024-pixel-wide resolution when you take into account the browser’s toolbar and scroll bars.

Anything larger than 960 pixels creates a horizontal scroll bar along the bottom of the browser window, and you don’t want your readers to scroll horizontally while reading your website. A resource you may find helpful is the 960 Grid System website, which offers basic Photoshop templates created with a 960-pixel-wide layout.

Using a fixed width layout has its advantages and disadvantages. One of the biggest advantages is that you can more easily control design elements such as graphics, icons, and banners. Because a fixed width layout is set to a static pixel width, you can be pretty confident that what you see on your computer screen is what your website visitors see, too.

Because you know the exact width of the website, it’s easy to plan for the insertion of videos, photos, and other media elements, and you can be certain that the files will display correctly within the container of the overall site design.

One disadvantage to a fixed width layout is how it looks on larger computer monitors. A layout that’s 960 pixels in width shows a lot of empty space on a monitor that displays content in a 1600 x 950 resolution. In this case, you’d have 640 pixels of empty space. Although this may bother some people, it’s not enough to dissuade some designers from using this model.

This website is a fixed layout at 960 pixels in width for a 1024-pixel-wide screen resolution.

image1.jpg

This demonstrates how the 960-pixel-wide, fixed layout appears in a 1600-pixel-wide screen resolution. You can see how differently the site appears, in terms of the empty space to the left and right of the design container on the 1600-pixel-wide resolution display.

image2.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
8 Modules on the WordPress.com Dashboard
How to Customize the Header Image in Your WordPress Blog
How to Personalize Your WordPress Blog
Improve Your Blog’s Title and Tagline Design for SEO
Adding Custom Navigation Menus to Your WordPress Blog
Advertisement

Inside Dummies.com