How to Design WordPress Websites with Fluid Width

By Lisa Sabin-Wilson from WordPress Web Design For Dummies

A WordPress website designed with a fluid width layout has a flexible width. Unlike a fixed width layout, a fluid width layout can expand or contract in width, based on the screen resolution used by the visitor’s browser.

If you use fixed width layout instead of a fluid width layout, and set it to 960 pixels wide for example, then the website “container” is exactly 960 pixels in width and never changes. With a fluid width layout, you set the width to a percentage such 90 percent for example, and the “container” for your website data takes up 90 percent of the browser window, no matter how big or small it is onscreen.

Here is a popular 90-percent-width layout. The header and footer of this site are 90-percent wide; the content area is 50-percent wide; the two sidebars are 20-percent wide; and the content area and first sidebar are separated by 5-percent margins.

A sample fluid width layout at a 90-percent width.

The CSS for the layout shown looks something like this:

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

The fluid width layout, with the width calculated in percentages, creates an elastic layout that changes its width based on the screen size your site visitor uses.

Fluid width has a few advantages — the most important being that it uses all the space (or real estate) of a browser. No real estate goes to waste. Fluid width adjusts to the visitor’s screen resolution and creates, what some feel is, a better user environment. Also, in screen resolutions smaller than 1024 pixels in width, it eliminates the horizontal scroll bar across the bottom of the browser that often happens with a fixed width design created for resolutions greater than 1024.

However, fluid width has several disadvantages that you need to be aware of. Many of these disadvantages are what cause designers to shy away from a fluid width design method. Here are some of these disadvantages:

Multimedia display: One major problem accounts for multimedia files such as photographs, videos, and images within the content of a website. If, for example, you embed a video that is 500 pixels in width and place it within the 50-percent width container, you can never be sure that every site visitor’s browser creates a content area greater than 500 pixels. If the visitor uses a smaller resolution, the embedded video, at 500 pixels in width, may overlap other areas of the site design, which isn’t your intended result.

You can work around this problem by using CSS properties like min-width and max-width; however, these properties aren’t supported by Internet Explorer, which means you have to work harder to create Internet Explorer–specific expressions that resolve the problem, using the height and overflow CSS properties.
Readability: Visitors that have very large monitors or screen resolution settings may cause a fluid width website to span the entire width of the screen, making it sometimes difficult to read — unless you use CSS solutions to create a minimum or maximum width.

Bottom line, it’s sometimes difficult to get a fluid width website to display correctly in all major browser systems without a lot of work — and browser-specific CSS hacks to force it into working and displaying the way it should. Getting such a site to display correctly isn’t impossible, but the extra time and work (and brain power) involved in making it happen make some designers stick with a fixed width layout method of designing websites, which is a perfectly acceptable practice.