Martin Francis

Blog of Web Designer Martin Francis

Jun 10

Fixed versus Fluid Layout

blog image relevant to text

Explain the advantages and disadvantages of both fixed and fluid web page layouts from a design perspective.

Fixed width is:-
A fixed width is one where the main wrapper is set to a specific immovable width that remains the same no matter the users browser window size or screen resolution.

Fluid width is;-
A fluid or liquid layout is created by not specifying a wrapper width at all or doing so by using percentages as the units of width. So a 100% width will use all of the width of the browser window.

Fixed width
The overall design can be controlled and be just like the way the designer intended. It is easier to design for content that is fixed width such as videos, adverts, and images.
Small resolution screens end up with a horizontal scroll bar. If you accommodate small screens and use a narrow width then larger screens will see a lot of white space.
To get round some of the cons most designers will centre the layout (using margin 0 auto) and using either 760px width for 800pixel wide or 960pixel for 1024 pixel width screens. Also to include different style sheets for different media types such as mobiles and at the other extreme projectors.

Advantages in certain situations can be constrained with max width, min width property, does not include padding borders or margin, Max height and min height does not include padding, borders, or margin By using a mixture of width, height, overflow, and max, min we can take control of both fixed width, fluid and fixed/fluid layouts
Fluid can be more user friendly because it adjusts to the users set up. If designed well can eliminate horizontal scroll bars that appear on small screen sizes. Also with wider screens more or all of the content will appear on the screen above the fold and so there may be no need for vertical scrolling at all.
The designer has less control over what the user sees Elements that usually have a fixed width such as images, video may have to be set at multiple widths to accommodate different screen sizes.
Lack of content on large screen sizes may create a lot of white space and long unreadable paragraph lines.

To get over this a web designer can use the max width min width properties, and so the layout within it’s and max and min width fills the browser space available but beyond these limits it behaves just like a fixed layout.
Only one slight drawback in that earlier versions of IE don’t support it. But as time goes by this is less of a problem.

Posted by: martin Last updated on:2010-08-04 20:24:46
Tag:- layout