Menu Search
Jump to the content X X

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →

Adaptive CSS-Layouts: New Era In Fluid Layouts?

Fluid web designs have many benefits, but only if implemented correctly. With proper technique, a design can be seen correctly on large screens, small screens and even tiny PDA screens. With bad coding structure, however, a fluid layout can be disastrous. Because of this, we need to find ways to work around most, if not all, of the cons of fluid design.

If you as a designer are going to go through all the extra work of creating a functional fluid layout, why not go a bit further and make it compatible with all resolutions, instead of just most? You can use a few techniques to create an incredibly versatile, adaptive layout that will stay perfectly functional with the constantly changing screen sizes.

In this article, we’ll discuss effective techniques to create 100%-functional adaptive CSS-layouts, and provide details on other tutorials and practices.

Also consider our previous articles:

1. Fluid Layout Using A Grid Link

Most of us have heard of the 960 Grid System3 for designing fixed-width Web pages. Using 960 often makes fixed-width design preferable to fluid layouts. However, there is a way to create a grid-based elastic layout. Elastic layouts are, technically, different than fluid layouts in their coding structure, but they provide almost identical results for the user.

What Is a Fluid Grid? Link

A fluid grid can be created through a smart use of DIV layers, percentages and very simple math. The idea comes from Ethan Marcotte4, who realized that the “em” unit could go further than font size. We’ll go over the basics here, but for a complete and detailed overview of the method, read the article Fluid Grids5 by Ethan Marcotte, which is a complete walk-through and tutorial on creating a grid-based elastic layout.

The idea here is to use relative units, a combination of percentages and em’s, and to use simple division to find the equivalents of pixel widths that would normally be used for fixed-width design.

The Benefits Link

  • This method allows you to have a grid layout, which once only seemed possible with fixed-width layouts.
  • The user can view the entire layout using their preset text size, and everything will stay in proportion.
  • The layout style uses concepts that are cross-browser compatible.
  • Once understood, the concept is a fairly easy fix for most problems with fluid design.

How to Create a Fluid Grid Layout Link

The first step in creating this fluid layout is to create a mock-up of the preferred fixed-width layout. This way, the designer can still see the proportions and can apply Divine Proportion, balance and appropriate spacing techniques.

Fixed-width version of our final result

From the simple layout above, we can see how we would code this in CSS. 960 pixels would be our fixed width, and we would force a horizontal scroll bar for any resolution narrower than this. All of our content is in a wrapper that is 880 pixels wide. We have 40-pixel margins on both the left and right side, and 20 pixels of spacing between all of our elements.

Everything’s fine until we start thinking about usability. This type of layout would probably work well for many users; but not for everyone. So, let’s transfer this to a fluid layout. If we want this layout to maintain its proportions at any screen resolution, we’ll have to change our 960-pixel width to 100%, and then find the percentage equivalents of 880 pixels, 640 pixels and 220 pixels.

This just requires some rational thinking. In our fixed-width mock-up, our entire wrapper was 880 pixels, within the 960-pixel-wide design. If we want the equivalent in a percentage, all we have to do is divide:

880 pixels ÷ 960 pixels = 0.91666667

Take that decimal number, turn it into a percentage and you get 91.666667%. Now, because browsers handle percentages differently, it would not be wise to put all those decimals places straight into the layout. Browsers either round up or down, so to know exactly what we’re working with, we should round it to a whole number ourselves. Since it’s closer to 92%, we’ll round up. If we need to round it down later because of extra spacing issues, that’s easily done.

wrapper {
	width: 92%;

For the content and sidebar areas, we need to do the same thing, but in the right proportion. Because these two areas are within the 880-pixel-wide wrapper DIV, we need to find the percentages of these relative to this DIV:

640 pixels ÷ 880 pixels = 0.727272 → 73%

220 pixels ÷ 880 pixels = 0.25 → 25%

content {
	width: 73%;

sidebar {
	width: 25%

Let’s actually round the content area down to 72%, so that our layout doesn’t break. Because it has to be positioned next to the navigation bar, we don’t want it to be too wide.

Our fixed-width layout mock-up with percentage equivalents.

This is a very easy concept and a much more efficient way to handle proportions in fluid design. With this technique, a designer doesn’t have the excuse that proportions cannot be maintained and ruin the aesthetic appeal of their layouts.

A Note About Margins Link

Designers will determine the length of the margins in different ways. One way is to calculate the percentages of the margins (in this case, 20 pixels ÷ 880 pixels). Another is to set fixed margins or, as in our example, hard-code them in as 20 pixels.

Each method has its pros and cons. With percentage margins, the designer risks the margins being too wide in very large screen resolutions but probably achieves better proportion. Fixed margins may cause slight imperfections in the proportions but guarantees that the spacing will look right no matter what the screen size.

2. Adaptive Content Link

Another common problem with fluid designs is that even though they adapt to many screen resolutions, if the resolution gets too small (such as on a phone or PDA) or incredibly large, things start to look a bit funny. For example, a three-column layout would look very cluttered on a PDA screen whose resolution is only 240-pixels wide.

To address this problem, we can use a technique that involves adapting content to a specific ranges of screen resolutions. Fortunately, we can still use the technique outlined above to retain our proportions, and then we can add this technique for even better usability.

Fluid Layout with Adaptive Content Link

Most fluid layouts look great in screen resolutions of 800×600 pixels up to 1280-pixels wide and larger. However, it would be even better if we could break it up a bit more and create slightly different custom-made layouts for resolutions that are 800 to 1024 pixels, 1024 to 1280 pixels and 1280 pixels and up. Likewise, custom adjustments could be made for screen resolutions that are 640 to 800 pixels, 320 to 640 pixels, 240 to 320 pixels, and 240 pixels and below.

An example of this technique is used on The Man in Blue6:

A layout for a screen resolution of 800 pixels and wider.

A layout for a screen resolution of 800 pixels and narrower.

The example above has only two separate style sheets: one for resolutions wider than 800 pixels and one resolutions narrower than 800 pixels. A better implementation of this technique would have several layout styles to more accurately accommodate different screen resolutions. Marc Van Den Dobblesteen’s layout example, Switchy McLayout7, provides a perfect example of using these alternative style sheets.

The Benefits Link

  • The designer is able to see with greater accuracy what a design will look like in different resolutions.
  • Better adherence to design principles of spacing and balance, no matter what platform the design is viewed on.
  • The tiniest and largest resolutions are handled with perfection.

Create a Fluid Layout with Adaptive Content Link

To create this type of layout, we need two things: separate style sheets for every range of screen resolutions, and a way of determining a user’s screen resolution. A popular walk-through of this is the article Dynamic Resolution-Dependent Layout Technique8 by Kevin Hale.

The first step is to create a set of alternative layout files. For example, one could be called narrow.css and would be tailored to very narrow resolutions. Another could be normal.css and would apply to conventional computer screen resolutions, and a third could be wide.css and would handle unusually large resolutions.

We can then use JavaScript to make some simple alterations depending on the preset style sheets. Dynamic Resolution Dependent Layouts9 offers some sample JavaScript in the demo explains how it is being used. Declarations of all the style sheets and the JavaScript file are then put in the header, just like any other type of layout.

<!-- Narrow style sheet -->
<link rel="alternate stylesheet" type="text/css" href="css/narrow.css"

<!-- Default style sheet -->
<link rel="stylesheet" type="text/css" href="css/normal.css" title="default"/>

<!-- Wide style sheet -->
<link rel="alternate stylesheet" type="text/css" href="css/wide.css" 

<!-- Included JavaScript to switch style sheets -->
<script src="scripts/dynamiclayout.js" type="text/javascript"></script>

Notice the title attribute in all three links to the style sheets: “narrow,” “default” and “wide.” Taking a closer look at the DynamicLayout() function in the JavaScript source, we can see that it is quite easy to customize which style sheet is called according to each title attribute. We can also see how to change the pixel widths accordingly.

function dynamicLayout(){
    var browserWidth = getBrowserWidth();

    // Narrow CSS rules
    if (browserWidth < 640){
    // Normal (default) CSS rules
    if ((browserWidth >= 640) && (browserWidth <= 960)){
    // Wide CSS rules
    if (browserWidth > 960){

This technique is very easy to implement and works great with other techniques for creating more usable fluid layouts. Take a closer look at the JavaScript to see in more detail how things work.

Similar Techniques Link

For a similar technique, look over Dynamic layouts with adaptive columns1410 over at Brand Spanking New11. It features generally the same code, although slightly different. There are fortunately many options and script examples for getting the same adaptive content technique to work.

An adaptive layout.12

An adaptive layout.13

To download the script for this version of adaptive content, go to Dynamic layouts with adaptive columns1410.

The concept isn’t difficult, and many developers have made their own version of this technique. A great source to find even more examples of adaptive content layouts and scripts is’s blog post, “Variable fixed width layout15“. There is even one such technique featured on this post that requires no JavaScript whatsoever: CSS Drop Column Layout16.

3. Images In A Fluid Layout Link

One major concern among developers of fluid layouts is dealing with images and other content that requires a set width. In most cases, we’d all like our images to be as large as possible, or at least to prevent any awkward white space if they’re too small. In a fixed-width layout, adjustments can be made manually, but quite easily, to overcome these issues. However, in a fluid layout, in which the width of the area where images appear is constantly changing, these problems can come up all over again.

Automatic Magazine Layout Link

One solution requires some smart algebra and PHP. The full explanation (including the math) and the downloadable source code is available in the article Automatic Magazine Layout2117 by Harvey Kane. The title derives from how images are displayed in magazines: organized and always perfectly aligned. Of course, a magazine designer has to go through a certain process to achieve this look, involving resizing and manual placement.

There is now a technique that achieves this effect for us, too. Below is the first example of what the script can do:

Example 1 from the Automatic Magazine Layout by Harvey Kane

As you can see, things are definitely prettier. But how does it make things more usable with a fluid design? Harvey Kane gives the PHP script that we need to use:

# include the class file

# Define the width for the output area (pixels)
$width = 600;

# Define padding around each image; this *must* be included 
#in your style sheet (pixels)
$padding = 3;

# Define your template for outputting images
# (Don't forget to escape the &)
$template = '<img src="image.php?size=[size]&file=[image]" alt="" />';

# create a new instance of the class
$mag = new magazinelayout($width,$padding,$template);

# Add the images in any order
$mag->addImage( 'landscape1.jpg' );
$mag->addImage( 'portrait1.jpg' );
$mag->addImage( 'landscape2.jpg' );

# display the output

echo $mag->getHtml();

We can predefine the width that we’d like our entire magazine-inspired image layout to render as. So, if we can find out what the user’s browser width is, we can determine how wide our image layout should be. This is easy enough, because we’ve already done it with our second technique: fluid layouts with adaptive content. In his script, Kevin Hale uses a method called getBrowserWidth(). You can get a more in-depth look at the code for this method in his article.

If we can use this method to retrieve the browser’s width as a number, then we can use this number to find the pixel width of our content area (or whatever area these images are going to be placed in). Let’s say we’d like to put the images in our content area, which is set to 70% width. Using simple math, we just need to find out how many pixels is 70% of the browser’s width.

Pixel width = Percentage of Content Area x Browser Width
$width = 0.70 x getBrowserWidth();

This is, of course, pretty basic math, and a pretty basic solution for dealing with images in fluid layouts, once the initial PHP script is set up. Adjust the PHP script to automatically find the pixel width of the images, and you’ve got a great way of dealing with images, or any other content that has a set width, in a fluid layout.

4. jQuery Masonry Link

There are enough problems in CSS without thinking about constantly changing screen resolution. There is one common problem, though, that many designers may face more than others — multiple content boxes. When working with many floated elements, some awkward extra whitespace may show up between sections of varying heights. An example of this is below.

Awkward, uneven space with floated divs.

If we want to use divs in this way in a fixed-width layout, the fix is easy: just manually adjust the divs until everything is in place. Dealing with divs in this fashion in a fluid layout almost seems impossible. Every time the layout is adjusted, we get weird whitespace in a new spot, and in different amounts.

Extra whitespace caused by the layout colapsing into two columns.

Viewing the same layout in a thinner resolution causes the layout to collapse into a 2-column layout, as it should. However, when this happens, we get a different whitespace issue. Any designer can see this is a very ugly problem for layouts, and often times layouts like these are forced into fixed width because there seems to be no way around the problem.

Fortunately, it’s not an impossible fix, but rather an incredibly easy one — thanks to David DeSandro’s jQuery Plugin: jQuery Masonry.

What is jQuery Masonry? Link

jQuery Masonry is a very easy to use jQuery plugin. In the words of David DeSandro himself, “Think of Masonry as the flip side of CSS floats. Where as floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. The result leaves no vertical gaps between elements of varying height, just like a mason fitting stones in a wall.”

How to Use the jQuery Masonry Plugin Link

In the example above, all of the boxes are placed in paragraphs with an ID of “item”. This item ID has a set width of 30%, and floats to the left. All of these ‘item’ paragraphs are then placed inside of a very basic wrapper with its own fluid width of 90%. Once the paragraphs reach the end of the wrapper width, they’ll go to the next available line — whether it causes too much whitespace or not.

Fixing it is as easy as downloading the jQuery Masonry plugin, and applying the .masonry() method to our wrapper ID.


The two images below show the power of this plugin. First is the layout on a large screen resolution, second is the same layout on a lower screen resolution when collapsed to two columns.

Fixed full-width layout.

Fixed collapsed layout.

One Bug to this Plugin, and One Fix Link

When using this plugin, one will notice that the div layers stay in the same spot if a user were to resize their browser. Upon refresh, the layout is fixed and works appropriately again. However, the user will not know they need to refresh to fix the problem, so changing the HTML code below will correct this bug quite easily.

<body onresize="window.location=window.location;">

Now, every time the user changes their browser size, the browser will autmoatically refresh and reload the entire script.

5. Smart Columns with jQuery & CSS Link

The jQuery fix above solves problems with divs of varying height, but for a layout intended to have even div heights, it might not be the best solution. Soh Tanaka of has come up with a jQuery script and a smart use of CSS to make columns in fluid layouts collapse and expand elegantly. For an example, check out the demo: Smart Columns w/ CSS & jQuery.

What are Smart Columns with jQuery & CSS? Link

Smart Columns are a script that can alter the width of the divs for the best viewing quality, and also determine how may columns can be viewed across that page for the browsers current size. It is also perfect for users who resize their browsers, rather than just accomodating browser size on entry to the website.

Smart Columns with jQuery and CSS

Smart Columns with jQuery and CSS

The script takes the remaining whitespace off of the end of a row of columns, which may be caused by varying browser widths, and then places them evenly throughout the columns using jQuery.

How to Get Smart Columns Link

The code is all laid out in Soh Tanakas blog post: Smart Columns w/ CSS and jQuery. It can be set up using a list, with each block item as a <li> element.

<ul class="column">
		<div class="block">
		Block 1
		<div class="block">
		Block 2
		<div class="block">
		Block 3

Then, by intserting the CSS and jQuery code into the page (Soh Tanaka has easily laid this out in the above post), the smart columns will work. Customizing the code is easy, and only requires editing the CSS in terms of width, height, and margins.

6. Text Zooming Link

Another common problem among fluid layouts is the concern that the text either gets so stretched or squished that the layout loses readability. The image below shows this problem, both for an incredibly wide screen, and then for a very thin screen. The very thin screen seems to host the biggest problem by causing big gaps in the text, but both instances can frustrate the user equally.

Readibility can be an issue with fluid layouts.

One method to combat this is to use min-width and max-width, although that has two problems:

  1. Min-width and max-width are not supported in all browsers,
  2. the layout is then just resorting to a partially fixed-width layout, and we lose overall flexibility again.

Luckily, James over at Tinned Fruit18 has created a script that does something to fight this problem.

What is Text Zooming? Link

Text Zooming, as he calls it, is a JavaScript that automatically resizes text based on the width of the user’s screen. As the screen gets wider, the text gets larger. Likewise, as the screen gets thinner the text gets smaller. In addition to this basic functionality, a designer can set a max and min text size so the user never sees any oddly sized text.

For a live demo, go to his Text Zooming page. As one can see, the script degrades nicely, and the larger text is easy to read on a wide resolution, just as the smaller text is to read on a thinner resolution. Better yet, the header and navigation don’t change in size, so a designer can choose which elements should use the text zoom.

Text Zooming in action.

Above is a portion of the maximized page (large width) that is displaying larger text.

Text Zooming in action.

Above is the same page, only minimized to about 700px in width. The text is resized along with the browser.

How to Get Text Zooming Link

Text zooming is a basic JavaScript that one can include to a web page externally. To download the JS file and read further instructions, head on over to the demo page: Text Zooming.

Below the external script line, it’s as easy as intserting the following code and changing it as necessary.

<script type="text/javascript">
  var contentZoom = new TextZoom(
    "Content", // Reference element
    "Content", // Target element
    0.22, // Zoom ratio
    70, // Minimum font size (%)
    130); // Maximum font size (%)

Conclusion Link

All of these techniques can be implemented in one design to create a very user-friendly fluid layout. A smart use of the fluid grid can create an adaptable layout whose proportions remain faithful to the Rule of Thirds, balance and other design principles. The adaptive content technique can handle unusually small and large screen resolutions with a bit of customization, so the designer is sure to get the perfect look for all users. And the third technique is a good one for making sure that images and other pieces of content with set widths aren’t too large for the screen.

jQuery Masonry leaves no vertical gaps between elements of varying height, just like a mason fitting stones in a wall; thet “Smart Columns techniques” makes columns in fluid layouts collapse and expand elegantly and Text Zooming
provides a JavaScript that automatically resizes text based on the width of the user’s screen.

Hopefully, advanced fluid layout techniques will signal a new era in layout design. With the growing variety of screen widths, it’s only a matter of time before these techniques become essential.

Further Resources Link

You may also be interested in these additional resources:


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24

↑ Back to top Tweet itShare on Facebook


The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' web with the latest tips and tricks for designers and web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

  1. 1

    i think these things will not be much successful for a heavy design with lots of graphics..

    still a good article and would work good with normal designs…

  2. 2

    Really interesting points and clever solutions.
    I think flexible layouts only make sense for sites with lots of text. Personally I am quite happy with sites fixed at 960px and prefer them to be well organized and layouted at this size.

  3. 3

    This was a very useful post. Thanks KNIGHT.

  4. 4

    Really helpful

  5. 5

    Chris Benyamin

    June 9, 2009 7:15 am

    Yeah, that article rocks. Good collection!

  6. 6

    Darren Taylor

    June 9, 2009 7:50 am

    Excellent article but I think your typical web designer would struggle to understand this and unless they are html savvy providing them with an easy-to-follow brief might be a bigger challenge!

  7. 7

    Nice Article Kayla, that is something which need to learn to everyone. It’s a new era of wen designing so everyone need to be updated with smart tweaks and tricks for CSS/XHTML.

    DKumar M.

  8. 8

    700px + 220px != 880 with a 20px margin between. Likewise, 79% + 25% > 100%. Not good for side-by-side elements. It would be nice to include some sample markup showing how you are performing the nesting and margins. Padding on the container? Margin on the internal elements? You seem to gloss over the details that make percentage-based layouts tricky. Thanks.

  9. 9

    Think 700px is meant to be 640px?

  10. 10

    Excellent article.
    The fluid port of the 960 grid system by Stephen Bau deserves a mention.

  11. 11

    Ejaz Siddiqui

    June 9, 2009 8:34 am

    Really a great article. Thanks SM

  12. 12

    I still prefer fixed over fluid but this does look like a really good way to bridge the gap. I wonder for usability if really changing layouts depending on size is a good thing. If I typically look at a site in one form, then jump on a netbook or phone and the layout has shifted, I would have to reacquaint myself with the elements.

  13. 13

    Instead of the dynamicLayout stuff you could take a look at media queries. That way you could do for instance <link rel="stylesheet" media="screen and (max-width: 640px)" href="css/narrow.css"> etc. See the specifications: specs.

    It is currently supported in Opera, Safari, Firefox 3.5 and I believe many of the newer mobile browsers.

  14. 14

    Possibly one of the best articles i have read and it really shows the direction of where web design is going.

  15. 15

    Cool.. I liked the Text Zooming

  16. 16

    nice article. i am using 1004px width for the main container, i will try to apply this on my next project.. thanks smashing..

  17. 17

    Nice article. We’ve definitely been looking more and more into this and it is extremely timely for the web design industry.

  18. 18

    Nice article !

  19. 19

    Harald Kirschner

    June 9, 2009 10:51 am

    Nice article, except the refresh force on resize as fix. I’m sure users will find it pretty strange when the site refreshes when you resize, it is a pretty dirty and not an acceptable solution at all.

  20. 20

    saurabh shah

    June 9, 2009 11:37 am

    nice round up !


↑ Back to top