Average Website - Fixed vs Liquid Width

10 Comments Posted In:

There are many debates about a fixed and a liquid width in web design. So what are the difference between fixed and a liquid width? What are some advantages or some disadvantages to one or the other? There are different ways to approach this. Some web developers like liquid and some like fixed width. Both layout methods are perfectly fine. It just matters how you want your sites to function. Remember the average website width that a web user views at is 1024 x 768 pixels, on most web browsers. When your sizing up your site, Storyboarding is a great idea to do.

Fixed Layout Design

Fixed Width is a site that has a standard layout. There is no way the width of the site is changing, unless modified in the code. Now your web browser can change to all sorts of sizes. But the webpage will stay a certain width, no matter what the web browser size is. WebHostDesignPost is a fixed layout. You change your browser size, the layout does not change.

CSS Example for Fixed Width: #content { width:600px; }

Liquid Layout Design

Liquid Design

Liquid Width layout has different capabilities. When a web developer codes for a liquid layout, the web design browser adjust width automatically. If you have a small web browser view, then the site adjusts its pictures, text and layout to fit. If you have a big web browser view, then the site would adjust its pictures, text and layout to control the white space of the site. Most developers will have a minimum width set for the layout. Doing this will not let your pictures, text and other elements smash to one side.

CSS Example for Liquid Width: #content { width:60%; }

Advantages and Disadvantage to a Fixed Layout

There are some advantages to Fixed Layout. For a web designer, they have full control of the site design. They can design the site to the smallest pixel. You can choose what browser size to optimize for. A disadvantage of having this is that you take away the user custom controls. If a user has their font size higher than normal, then the design might render incorrectly. Or the site design will not allow it and the user has to use the smaller text.

Advantages and Disadvantages to a Liquid Layout

Average Website Width

There are Liquid Layout format advantages. When the user has his font size higher, the site will automatically adjust the font, pictures and layout of the webpage. The Liquid layout will make the larger fonts fit and not cause a problem to the design. But the disadvantage is that, web designer doesn’t have full control over their site design. They can't make the smallest pixel design for their elements, because the user's web browser size could change it.

Fixed and Liquid Both Work

Both methods of web design layouts are very good. There are some advantages and disadvantages to both. As a web developer you need to decide before the development stage what you are going to create. Look at the project and decided which format is suitable. If there is a lot of design elements included, a fix width layout is probably better. If there is a lot of content, a liquid width format will give users the ability to change the text size.


Average: 4 (4 votes)