Fluid and Elastic Layouts

There are two different ways in which you can make your web page more flexible in the way it reacts to the browser settings that your visitors may be using. One of these is to design your page so that it takes into account the size of your visitor's browser viewport (what we call a fluid design) and the other is to design your page to take into account the font size that your visitor has their browser set to use (what we call an elastic design). Both of these are variable width designs that can be considered as alternatives to using a fixed width layout. The way in which they differ is in how they decide how wide to make the various parts of your content.

In the case of a fluid design the widths of all the elements in your page are based off of the width of your visitors browser viewport. Where this has an advantage over a fixed design is that your page will use a fixed percentage of the viewport rather than leaving more and more unused space in the viewport as the available space gets wider. The main disadvantage is that you have no idea of how much of your content will fit across one line and therefore the alignment of the elements within your page will be harder to control.

In actual fact a fixed width layout suffers from most of the same problems as a fluid design in that you still have no idea of how much will fit across one line since as your visitor makes the font size bigger, less will fit.

The way to resolve the issue of getting the content to always align itself the same way relative to the surrounding content is to use an elastic design. With this design we base the sizes of the elements within our page on the font size that our visitor is using. If they make their font size bigger then we make the container for the text bigger so that the same amount of text fits across the line. This though has the disadvantage that our content width is determined independently of the viewport size and again we can end up either with lots of blank space or with the content becoming too wide for the viewport and thus presenting our visitor with a horizontal scrollbar.

Perhaps the way to give our visitors the best possible experience with our web pages is to combine all three ways of determining the width of our content.

No matter how small a viewport our visitors use we will want our page to have a certain fixed minimum width. We need this because our page usually includes at least some images which will need to be a certain size in order for their content to be of any use in being in the page at all.

At the other extreme we really want to avoid horizontal scrollbars as much as possible and so it would make sense to set the maximum width of our content to be 100% of the viewport width.

The problem with doing this is that we can potentially have the situation arise where the defined maximum width for our content is less than the defined minimum width. You may need to do some experimenting with the order in which you declare the minimum and maximum widths with a range of different browsers in order to determine exactly what happens when this situation arises. You could also look into making the minimum width small enough to reduce the likelihood of this occurring.

In between our fixed minimum and fluid maximum we could then make our content width elastic by specifying all the widths using em.

The other alternative would be to make the widths more dependent on the viewport size and less dependent on the font size by specifying the maximum width in em and the widths in percent.

Which of the different combinations of determining the width of your content will be best suited to your page will depend on just exactly what your page contains. Where your page has multiple columns then you also have the same decision to make with respect to each column as to how its width will be determined.

A certain amount of experimenting with different alternatives of fluid and elastic widths for the various columns in your design may be well worth the effort in determining the most suitable combination to use so as to make your page as friendly as possible to those visitors who are using different viewport sizes and font sizes.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow