Home » Featured, Headline, Web Design

Layout Wars: Fixed vs Fluid

15 June 2009 No Comment

me1There is a quiet battle that has been going on for years, we know about Microsoft vs Open Source, Google vs the World, the Browser Wars etc etc.  This battle is called the Layout Wars and why is called as such?  Simple with the millions of web designers there is a specific way they like to design and so in those specifics three large groups have formed.  Fixed, Fluid, Elastic.

However, to keep this topic simple, I am kicking the elastic group out and keep the three oldest and dominate groups in.  So why this topic?  Well I came across Smashing Magazines’s article about the same topic and it well detailed with lots of information that is well worth the read.  So I will base my opinion on that information and give my final verdict on which to go.

To start off we know that a fixed layout is a layout where you are using specific number of pixles or px within a wrapper.  Which is roughly between 800px-1024px wide because of the standards of monitors being used, of course needed to design in 800px is a lost art as the 1024×768 resolution is now standard for all computers.

As for a fluid layout, this is a layout that regardless of monitor size  the design will adapt itself to fit that monitor.  So if you build a fluid layout in 1024×768 and someone sees it in 1920×1200 resolution, the website will adapt to the 1920×1200 resolution with no problems.  Of course, the interesting part about this, is that you don’t need to be working in 100% to achieve this liquid like layout and so why it may seem it, just looking at the code could tell you other wise.

So now that we have  a general idea what these two layouts are look like, lets look at the good, the bad and the ugly.


Good –

The design layout will never change

Designing a fixed layout is a bit easier then designing a fluid layout

Bad –

If you were doing a fixed table layout and using background images, trying not to break the layout can be a challenge

Depending on the screen resolution, you perfect 800×600 or 1024×768 will look bad at larger resolutions, especially if you don’t center it or use a background image that takes up a large portion of the background

Ugly –

Content would be limited by the amount of space giving and so be prepared to spend a lot of time scrolling or click next page links

Breaking of the design if the code isn’t tighten up and coded properly, especially if your doing a tabled designed

Depending on how you design the layout it could make everything look constritictive


Good –

No Scroll bars of any horizontal kind

The website will adapt itself to any screen resolution no matter how big or small it is

No white space

Content will adjust to the various sizes to be more user readable

Bad –

Working with an all image layout will become a problem because you have to make sure that it is repeat in the X and Y axis and so it is a lot of testing to make sure your images work properly

Even if you set up your site to be a hybrid meaning that content would or could be fixed and surrounded by a fluid layout, it is still possible to botch the design if done incorrectly or the code is invalid

Ugly –

if done a liquid layout wrong its going to get butchered, because of the fact your code needs to 100% valid and your images need to cut and sliced accurately to work with the site.


To be quiet honest, between these two layouts its a matter of who is more effective at using these two layouts.  Especially in the blogging world Fixed layouts came back strong with the likes of WordPress, Joomla, and forum software.  However, forum software such as IPB, PHPBB and Vbulletin a fluid layout is the way of life as using a fixed layout just doesn’t seem right.

You have three choices, fixed, fluid or neutral;  however being a neutral party means you just began being a web designer and haven’t though about it much.  As for us 1st generation designers, we pick our sides and as for what I choose? Simple either or as I don’t see it as importance as a designer unlike the new crop of designers out there.

Leave your response!

You must be logged in to post a comment.