Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Design WordPress Websites with Fluid Width

A WordPress website designed with a fluid width layout has a flexible width. The container of the website content is determined by percentages rather than static pixels. Unlike the fixed width layout, the fluid width layout can expand or contract in width based on the screen resolution used by the visitor’s browser.

With a fluid width layout, you change the 960 pixels in width to 90 percent in width. The container takes up 90 percent of the browser, no matter how big or small.

Here is a popular 90-percent-width layout. The header and footer of the 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.

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: 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 is 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 appears 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. 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 do have workarounds for this problem, however, by using CSS properties like min-width and max-width; however, these properties aren’t supported by Internet Explorer (like they are in Firefox and Chrome browsers), 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.

Speaking of CSS, it’s sometimes difficult to get a fluid width website to appear correctly in all major browser systems without a lot of work — and undesired browser-specific CSS hacks to force it into working and appearing the way it should.

Getting the site to appear 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.

At the end of the day, whichever method of laying out websites you’re most comfortable with is what you should stick with. But, by all means, experiment with different layouts and solutions to find the ones that you like best.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.