Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?


The problem has boggled the minds of Web designers for years: fixed, fluid, elastic or a hybrid layout design? Each option has its benefits and disadvantages. But the final decision depends so much on usability that it is not one to be made lightly. So, with all the confusion, is there a right decision? By considering a few factors and properly setting up the final design, you can end up with a successful layout design that reaps all the benefits.

This article discusses the pros and cons of each type of layout. Either one can be used to make a successful website layout, as long as you keep usability in mind.

Also consider our previous articles:

Why all the debate? Web page design comes down to usability, and this can be difficult to balance because website users can account for many different variables among them.

When designing a website layout for a large audience, the designer must consider the following potential differences among visitors:

  • Screen resolution,
  • Browser choice,
  • Whether or not the browser is maximized,
  • Extra toolbars open in the browser (History, Bookmarks, etc.),
  • Even the operating system and hardware.

Without the benefit of a standardized website size to work with, Web designers encounter numerous problems when it’s time to get to work.

1. Difference Between Fixed And Fluid Layouts

Although most designers and developers would consider defining fixed and fluid website layouts to be elementary, we’ll go over it just to be clear.

Fixed Website Layouts

A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths. The important thing is that the container (wrapper) element is set to not move. No matter what screen resolution the visitor has, he or she will see the same width as other visitors.

Fixed in Fixed vs. Fluid vs. Elastic Layout: Whats The Right One For You?

The image above shows the general outline of a fixed-width website layout. The components inside are fixed to 520, 200 and 200 pixels, respectively. A 960-pixel width has become the standard in modern Web design because most website users are assumed to browse in 1024×768 resolution or higher.

Fluid Website Layouts

In a fluid website layout, also referred to as a liquid layout, the majority of the components inside have percentage widths, and thus adjust to the user’s screen resolution.

Fluid in Fixed vs. Fluid vs. Elastic Layout: Whats The Right One For You?

The image above shows a fluid (liquid) website layout. While some designers may give set widths to certain elements in fluid layouts, such as margins, the layout in general uses percentage widths so that the view is adjusted for each user.

2. Fixed Web Page Design

Many designers prefer fixed layouts to fluid ones because they’re easier to make and provide more assurance that what the designer sees, the user sees. However, the pros and cons come out even with fluid-layout design.


  • Fixed-width layouts are much easier to use and easier to customize in terms of design.
  • Widths are the same for every browser, so there is less hassle with images, forms, video and other content that are fixed-width.
  • There is no need for min-width or max-width, which isn’t supported by every browser anyway.
  • Even if a website is designed to be compatible with the smallest screen resolution, 800×600, the content will still be wide enough at a larger resolution to be easily legible.


  • A fixed-width layout may create excessive white space for users with larger screen resolutions, thus upsetting “divine proportion,” the “Rule of Thirds,” overall balance and other design principles.
  • Smaller screen resolutions may require a horizontal scroll bar, depending the fixed layout’s width.
  • Seamless textures, patterns and image continuation are needed to accommodate those with larger resolutions.
  • Fixed-width layouts generally have a lower overall score when it comes to usability.

Examples of Fixed-Page Design

Here are five examples from designers who get the most out of fixed-width layouts. These websites incorporate many design elements, a perfect scenario in which to use a fixed layout. The designers have more control over the placement of extra design elements around the content areas and can work with the content and navigation widths more precisely.

Fixed1 in Fixed vs. Fluid vs. Elastic Layout: Whats The Right One For You?

Fixed2 in Fixed vs. Fluid vs. Elastic Layout: Whats The Right One For You?

Fixed3 in Fixed vs. Fluid vs. Elastic Layout: Whats The Right One For You?

Fixed4 in Fixed vs. Fluid vs. Elastic Layout: Whats The Right One For You?

Fixed5 in Fixed vs. Fluid vs. Elastic Layout: Whats The Right One For You?

Notice how in all of these examples, the designers use continuous imagery to work with larger screen resolutions.

3. Getting Around The Cons Of Fixed Web Page Design

If you’ve decided on a fixed page design, you should know these few tricks to get around the cons of this layout and create a successful design.

Looking at the Statistics

Today, most designers assume that the majority of Internet users have a screen resolution of 1024×768 or higher. According to a poll published by W3Schools, this is not the case (please notice that one should take the W3Schools statistics with a grain of salt, more details about it follow below):

Piechart in Fixed vs. Fluid vs. Elastic Layout: Whats The Right One For You?

As you can see, 640×480 doesn’t even register on the chart. W3Schools’ analysis found a whopping 0% of users have this screen resolution. While, in fact, some users actually do have this screen resolution, the statistics show that they make up a small enough percentage that designers should be able to ignore the size and still offer wide usability.

Even for people who do use this resolution size, they probably use it mainly on smaller portable computers and wouldn’t use it as their primary screen resolution normally.

However, these statistics are probably not as accurate as one might hope. Because W3Schools’ visitors primarily belong to a certain demographic (designers and developers), the information is a little biased. Other research sources show different findings, but only slightly different. According to resolution statistics from individual companies in 2009, the 800×600 screen resolution showed up at somewhere under 10% of users.

This next interesting table comes from SohTanaka.com, whose blogger has done a bit of research comparing how some of the largest websites accommodated screen resolutions in February 2006 versus February 2008.

Topsiteaccomodations in Fixed vs. Fluid vs. Elastic Layout: Whats The Right One For You?

For all four major websites in the study, there was a complete turnaround. Even the biggest companies on the Web are now assuming that their audiences have larger screen resolutions.

For other research on screen resolution, have a look through the sources below:

960px or 760px?

All this being said, most designers choose a fixed width of either 960 or 760 pixels. A layout 960 pixels wide looks good for users with a 1024×768 resolution or above, with a bit of room for margins. For designers who want to accommodate the approximately 10% of users with a 800×600 screen resolution, the 760-pixel-wide layout works well, and is still suitable for larger screens.

Always Center the Layout

When working with a fixed width design, be sure to at least center the wrapper div to maintain a sense of balance (margin: 0 auto; usually does the trick). Otherwise, for users with large screen resolutions, the entire layout will be tucked away in the corner.

4. Fluid Web Page Design

Designers may not use fluid page designs for various reasons, but the layout’s benefits are often overlooked. Below are pros and cons to think about when considering fluid web page design.


  • Fluid web page design can be more user-friendly, because it adjusts to the user’s set up.
  • The amount of extra white space is similar between all browsers and screen resolutions, which can be more visually appealing.
  • If designed well, a fluid layout can eliminate horizontal scroll bars in smaller screen resolutions.


  • The designer has less control over what the user sees and may overlook problems because the layout looks fine on their specific screen resolution.
  • Images, video and other types of content with set widths may need to be set at multiple widths to accommodate different screen resolutions.
  • With incredibly large screen resolutions, a lack of content may create excess white space that can diminish aesthetic appeal.

Examples of Fluid Page Design

Below are two designs that use percentage widths to accommodate different screen resolutions. The first example in each set alters the width of the content according to screen width, while the second screenshot uses varying widths for the white space.

Fluid1 Large in Fixed vs. Fluid vs. Elastic Layout: Whats The Right One For You?

Fluid1 Small in Fixed vs. Fluid vs. Elastic Layout: Whats The Right One For You?

Fluid2 Large in Fixed vs. Fluid vs. Elastic Layout: Whats The Right One For You?

Fluid2 Small in Fixed vs. Fluid vs. Elastic Layout: Whats The Right One For You?

5. Getting Fluid Web Page Design To Work

Even though fluid layouts can present a few problems, some of those problems can be overcome with a few tricks.

Use Simple Design

The less a fluid Web design depends on graphics and difficult techniques, the easier it will be to create and maintain. It will also be more compatible with alternate screen resolutions. With cleaner code and design, compatibility problems are more easily prevented, found and dealt with.

Smashing Magazine, for example, uses a fluid Web page layout, and to make it simple only the top black-and-orange navigation bar expands, depending on the user’s situation. Otherwise, the content area expands and contracts as needed, and smart use of CSS covers situations in which the sidebar and internal content could clash.

Min-width and Max-width

Two CSS properties, min-width and max-width, can be used to create a fixed width if the user’s screen is too small or too big for the layout to be usable. In this case, the layout gets a scroll bar and functions essentially as a fixed-width layout. Look over W3Schools’ pages on the min-width and max-width CSS properties below for more details:

Unfortunately, most versions of Internet Explorer don’t support min-width and max-width. Getting around this is simple, though, with an IE-specific expression. Read more about that in the article “Maximum and Minimum Height and Width in Internet Explorer.”

6. Elastic Design

There is a third option when working with Web page layouts. An elastic design is sometimes preferred by designers because it mixes the two other main layout types. It works by sizing all elements with em’s. The quote below explains exactly what an em is and why it can be beneficial.

“A pixel is an unscalable dot on a computer screen, whereas an em is a square of its font size. Because font sizes vary, the em is a relative unit that responds to users’ text-size preferences.”
Patrick Griffiths, A List Apart

While elastic design is supposed to offer more benefits, it still has its pros and cons like the other two layout styles.


  • If implemented correctly, this layout style can be very user-friendly. The goal is to have everything grow larger or smaller in proportion with the user’s preference.
  • Elastic layouts are perfect for designers who love both fluid and fixed designs, because the pros of each are found in elastic layouts.


  • Even given the first pro above, this type of layout can create a huge problem with usability. It takes a lot of savvy and testing to get the layout right for all users.
  • This type of layout is much more difficult to create than the other two, and the extra bit of usability it brings may not always seem worth it.
  • Depending on the specifics of the layout, some elastic designs may require supplementary style sheets and cheats for IE6.

Examples of Elastic Page Design

Elastic and fluid layouts are incredibly similar in appearance, so much so that they are usually confused with each other. However, elastic designs use em’s instead of percentages and depend primarily on font size. These designs adjust to the text size that users set for their browser.

Elastic1 Large in Fixed vs. Fluid vs. Elastic Layout: Whats The Right One For You?

Elastic1 Small in Fixed vs. Fluid vs. Elastic Layout: Whats The Right One For You?

Elastic2 Large in Fixed vs. Fluid vs. Elastic Layout: Whats The Right One For You?

Elastic2 Small in Fixed vs. Fluid vs. Elastic Layout: Whats The Right One For You?

7. Which Is Right For Your Website?

Choosing between a fixed and fluid website will depend a lot on the type of website itself. Weigh the pros and cons above to determine the right solution for your website.

A portfolio website, for example, would probably be best shown in a fixed-width layout, so that you have more control over the design. Not only will you be able to better control the layout of individual elements in the design, but the images in your portfolio showcase will be better handled with a fixed width. Many designers, not just those with portfolios, may prefer fixed-width layouts for the ease of use and assurance it gives them.

Any designer who seeks 100% compatibility should take the time to set up a fluid layout. In such a case, the main challenge isn’t the excess of white space in large screen resolutions, but rather the small percentage of users with a small screen resolution. For websites with large audiences, accommodating even the smallest percentage of users may be important. But even beyond that, websites with large audiences should have a simple and clean design anyway, which can be done effectively with a fluid layout.

Still can’t decide? An elastic or partially elastic design is still an option. When used correctly, elastic layouts can bring the biggest benefits of both other types<. Designers will often employ the elastic-layout principle in using em’s for fonts and containers, and then use a smart mix of percentages and pixel widths to set the rest of the layout elements.

What Other Designers Say

Comment by Heidi Cool on Fixed vs. Liquid vs. Elastic Layout
This designer makes some great points about working with other people who will be using the layout and may not know as much about Web design:

“I go back and forth on this issue. We use a fixed width at case.edu because:

  1. Liquid is more complicated, and we distribute templated designs to users of varying skills who might easily break a liquid layout. (They’re actually regular HTML files rather than Dreamweaver templates.)
  2. We want to ensure our maintainers don’t build pages with line lengths that are too long and thus harder to read.
  3. We try to limit the space available because people have a tendency of filling up whatever space is available. If they have large monitors they could really overcrowd a page not realize how messy it gets on smaller displays.

As you can see the bulk of these issues relate to the fact that our sites are distributed and built and maintained by people of varying skill levels. If I were working on one site alone and I was doing the coding, then I’d base the decision on goals, content, etc.”

Comment by madr on Where Have All the Flexible Designs Gone?
Two more good points are made here about using fixed-width layouts:

Banners and ads are usually made with images and Flash movies, making it harder to do an elastic or flexible design. I have worked in the newspaper world for a year and a half, and the ads really are a holy cow in these areas. So are article images, for which an elastic layout would make the viewing area too big for the top image.

Every browser but Safari 3 and below (Safari 4 is coming), Firefox 2 and below and IE6 and below (which are to be viewed as obsolete/deprecated soon) have support for page zoom instead of text resizing, making the time to accomplish a flexible and elastic design hard to justify since the majority of the visitors won’t even notice it.”

Comment by jphilapy on Where Have All the Flexible Designs Gone?
Two good points in support of fluid-width layouts:

“Flexible sites can be made to work at many resolutions. There is no need for heated debates or research about user screen sizes. Besides, screen resolution statistics are a myth; few people run their browser full-screen and many have toolbars, sidebars, or other widgets that use valuable screen estate.

Mobile phones, such as the iPhone, and games consoles are becoming viable alternatives for web browsing. In general, these devices have smaller resolutions and can benefit from flexible web designs.”

Comment by Calrion on About Fluid- and Fixed-Width Layouts
Clear case for using elastic designs:

“I think the ‘elastic’ layout is the best option. Fluid to a point, then fixed to ensure lines of text, etc., don’t become ridiculously long.

I’m a Windows user, and I maximize.

Mostly, I maximize because I can get the best look at whatever app I’m using, and because I generally have large amounts of detritus on my desktop. Additionally, maximizing my browser (Firefox) allows the maximum space for interface elements, specifically the links toolbar and tabbed area.

In terms of usability, fluid is probably best for savvy users, as their browser width is in control. For less experienced users, elastic is probably best, as it will automatically stop itself from becoming too wide.”

Comment by Georg on About Fluid- and Fixed-Width Layouts
An explanation of how one designer uses a mix of all three to get the best results:

“Fluid main part, fixed sidebars and (maybe) some elastic parts is my preferred layout method. I always keep text areas within 600px max-width though, and hack IE/win.

Using min/max for the whole page, so it’ll stay within 600 – 1200px and centers above. The same hacks for IE/win.

Testing everything on 600 to 2400 wide screens, and leave the rest to each visitor. Text lines will not get too wide (600px max), and the page doesn’t break too early under stress.

Most comments I get are that visitors don’t notice anything that really disturbs them, and that it makes easy read. Guess that means that it’s a working compromise.

Your site works fine for me, so I’ll call it a good compromise. My old eyes say the text is a bit too small, so I zoom it to 200% in Opera on a 1280 screen. No problems whatsoever.”

91 Comments to “Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?”

  • EzioAuditore1459 September 20, 2013 at 12:15 am

    Well,I wana lower my screen resolution because i wana record videos without the lagg. But when i put it to the lowest it sends me to a blue screen saying that windows have detected a problem. Can someone please tell me how to turn it off or anything of that sort.

  • D3ZZY September 20, 2013 at 4:45 pm

    For example, my desktop screen resolution is 1280 x 960. But when i run maplesea, it will run in full screen which is 1920 x 1080. Why is that so ? I want to make it run in 1280 x 960, is that possible ?

  • toysruslover September 23, 2013 at 8:39 pm

    Normally, it is full screen obviously. But when I play a large downloaded game like World at War and Combat arms, the screen resolution changes. It shortens the sides making the circles in the game look like ovals.

  • xiM Clutch September 26, 2013 at 4:04 am

    I have been sewing since I can remember. So I thought it would be fun to lead a sewing “camp” this summer. But when I started to think about it, I don’t know the basics, I just know how to do it. If you were to teach sewing to kids, where would you start? Hand sewing? Laying out a pattern or piecing a simple quilt?

  • sean September 28, 2013 at 2:29 pm

    I have Windows Vista (UGH) and I am testing website layouts in different screen resolutions/browsers. It is driving me crazy that every time I change the resolution, my desktop icons get all messed up! I know there must be an easy way to stop this from happening, but I haven’t found a way, yet. Anyone know? THANKS!

  • Caltel T September 30, 2013 at 3:23 am

    I have a problem that while I created my web site and everything is working fine it’s at a fixed 800×600 resolution and won’t change with different screen resolutions. I use a laptop with 1280×800 and I see a huge blank space to the right side and it looks unprofessional. This is my first website. Any help appreciated

  • whitesoxfan2347 October 1, 2013 at 5:25 pm

    I have a 1280 by 1024 screen resolution max monitor. If I buy a GeForce GTX 460, will I be able to increase the screen resolution? I prefer 1920 by 1200. Professional answers only please. I do not want to ruin my computer.

  • dealy October 4, 2013 at 8:12 pm

    We have 2 user accounts on our computer . On likes a screen resolution of 800X600 pixels but I find it too large and would like to use a different screen resolution.

  • Splash Log Level 2 Again October 5, 2013 at 3:05 am

    Some other blogs have figured out how to make their blogs adjust to different screen resolutions, to fit the screen of the view best. While mine just looks tiny on bigger ones 1600×900 etc.

    Does anyone know how to do this? How to get a blog to adjust to the screen resolution?

  • clntvrrt October 5, 2013 at 9:27 pm

    while playing in a match, how do you change your screen resolution to undefined?

  • Andre October 8, 2013 at 4:42 am

    In age of empires, there are options for making the screen resolution higher and I prefer using the highest one but that one is disabled on my laptop. Is there any way I can choose the highest screen res through my computer or am I just doomed.

    I have an HP Pavilion dv7-1245dx laptop.

  • Armas October 9, 2013 at 8:05 pm

    I am about to make a new site design, but I want it so the text and content fits every screen resolution. How is this possible? For example.

  • MentallyCryppled October 10, 2013 at 6:55 pm

    How can i make my wesbsite:
    viewable by all interenet browsers and screen resolutions. On every computer and different browser i use, it looks very different and the content is rearranged and sometimes even overlapping! Thanks!

  • Blake October 10, 2013 at 7:01 pm

    I am looking for large screens as they are useful for sound applications because there are lot of things you have to access on one screen.

    My laptop has the same screen resolution (1280×800) with this LCD screen i want to buy —- http://www.initialdvd.com/?page=products_lcd&id=31 —- but my laptops screen size is 15.4 inch and this ones is 26 inch.

    My question on my mind is that: When screen resolutions are same and the screen size increases will the image stretch to 24 inch which will make it look less detailed (more visible dots and bigger size of letters/icons) or will it be the same look (in size and quality with my laptop) but the space i will have be much bigger?

    Thank you in advance.

  • Jeanelle the Retard October 10, 2013 at 7:21 pm

    I was doing some scanning of my laptop’s drivers. I restarted my computer after and now the screen resolution got blown up a lot. How do I revert it back to the original resolution? I’ve tried adjusting it in control panel, but the only options I get are High and Low, and the High resolution isn’t what I had before either.

  • Andre October 13, 2013 at 10:54 am

    So I turned on my computer and a text box came up saying ‘your computers screen resolution and color depth are set at a very low level. You can get a better picture by increasing these settings. To do this, click this ballon. So I do and it comes up with another text box saying ‘do you want windows to automatically fix this for you?’ I click yes and nothing happens but before this happened I got a blue error screen and it said a problem was caused by a file named igxprd32 so I search that up and I was about to delete it but I didn’t and then I moved it to a folder called appdata then locallow then datamngr and that had a file called {7CA1F051-A4FB-4143-B263-02B41E571EED} sorry for the wall of text I just want to know how to fix it.
    I cannot move the slider all the way to the right it is stick on 640 by 480 pixels

  • Ryan Z October 13, 2013 at 2:39 pm

    i changed my screen resolution in mid game, now the screen is black and I cant see the menu to change it back. Its an online computer game. Help?

  • ademuth93 October 14, 2013 at 3:44 pm

    I’m making an android phone game and I want my screen resolution to fit the smallest screen resolution there has been that an android phone had. Then if there’s another android phone with a larger resolution, I’ll just re-size it in a scalar manner and just fill the empty parts with black. So then, what is the smallest screen resolution there has been that android phones had?

  • Franklin Bluth October 17, 2013 at 4:41 am

    I was looking to buy a jewellery making kit, but I want one that isn’t just plastic beads i want a sort of proffesional one but not to technical, like not a childrens play set, so could anyone tell me a good make, not to expensive as i just want to make bracelets and sell them on ebay and hopefully make a profit since im to young to get a proper job, thanks in advance:)

  • Matt October 18, 2013 at 9:53 pm

    I have set the My Pictures Slideshow as the screen saver on my parents’ computer, which they love, but their screen resolution is super low because of their eyes. The pictures, though shot in high resolution, come out blurry and I know they look much better once I increase the resolution of their screen. Is there a way to tell the My Pictures Slideshow screen saver to use a higher screen resolution?

  • stingerms October 20, 2013 at 5:43 pm

    My laptop (Dell XPS Studio) used to have a screen resolution of 1280×1024 but recently went in for some repairs and had windows 7 re-installed on it. Ever since it will only go up to 1024×768 leading it to appear stretched and grainy. I have checked that hardware acceleration is on and have checked on the Dell website that I have all the latest downloads. Any ideas?

  • Erin October 23, 2013 at 8:47 pm

    My screen resolution changes every time I play a full screen game but the game only loads as a small square in the centre of the screen, which ultimately leads to me missing details/dieing etc.

    How do i change this so it stays full screen?

  • Duke October 23, 2013 at 11:14 pm

    When I download mmo games I always get a option to pick a screen resolution. My screen resolution is 1440 x 900 should I be playing in a 1440 x 900 screen resolution or something lower or higher?

  • morbiusdog October 24, 2013 at 12:32 pm

    I want to change my screen resolution to 1024 by 768 or higher but it won’t do it. It stays on 640 by 480 w/ 16 bit color quality. I also tried Advanced but it shows 1024 by 768 w/ 256 colors and I dont want that. I want it to be be normal. Someone please help me…I’m sick of looking at it so huge.

  • Nick October 25, 2013 at 1:40 am

    I want my website to look same on popular browsers and on all screen resolutions

  • Sergeant Pickle October 27, 2013 at 7:59 am

    I cannot set screen resolution in the middle of 800×600 and 1024×768. The screen resolution indicator shows minimum (800×600) and maximum (1024×768), and I cannot keep slide cursor staying at some point in between. Because my screen is too big at 800×600 and too small at 1024×768. Do I have to download some kind of software or driver?

  • The Beatles October 27, 2013 at 5:06 pm

    I want to install my printer but its given me a message: “The screen resolution on this computer is set below the minimum required screen resolution for this software. The installation cannot continueuntil this is resolved.

    Current setting: 1024×576
    Minimum: 800×600
    Recommended: 800×600

    and that is it so if someone can help me please to figure it out that would be great!!!!!

  • Adam October 28, 2013 at 1:27 am

    What would decreasing my color quality and screen resolution do to my computer (would that mean my monitor’s going to be all dull and the images will not be as clear and sharp anymore)? What changes will it do because I don’t want to mess up my system in any way. Thanks!

  • Marlon P October 28, 2013 at 3:16 am

    What screen resolution do dvds that you buy at the store use to fit on your tv. I plan to convert and burn a dvd and watch it on my tv, the converter asks me what resolution and bit rate.


  • Zack Faria October 30, 2013 at 6:23 am

    I am using a hdmi cable and the screen resolution is set to 1920 x 1080. Some of the icons are either not visible or half visible. HELP!

  • mitesh October 31, 2013 at 5:37 pm

    I just hooked up my mac to the internet and I wanted to know how to change the screen resolution. When I am on certian webpages, things are just too small and stretched out. I know how to do it on a windows, but not a mac.

    Your help is apprecited! 🙂

  • Joey 01 November 2, 2013 at 9:38 pm

    This is the code

    Untitled Document