Adaptive CSS-Layouts: New Era In Fluid Layouts?

Advertisement

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

Most of us have heard of the 960 Grid System 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?

A fluid grid can be created through a smart use of DIV layers, percentages and very simple math. The idea comes from Ethan Marcotte, 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 Grids 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

  • 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

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.

name="code">
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%

name="code">
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

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

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

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 Blue:

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 McLayout, provides a perfect example of using these alternative style sheets.

The Benefits

  • 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

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 Technique 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 Layouts 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"
title="narrow"/>

<!-- 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" 
title="wide"/>

<!-- 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){
        changeLayout("narrow");
    }
    // Normal (default) CSS rules
    if ((browserWidth >= 640) && (browserWidth <= 960)){
        changeLayout("default");
    }
    // Wide CSS rules
    if (browserWidth > 960){
        changeLayout("wide");
    }
}

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

For a similar technique, look over Dynamic layouts with adaptive columns over at Brand Spanking New. 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.

An adaptive layout.

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

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 Clagnut.com’s blog post, “Variable fixed width layout“. There is even one such technique featured on this post that requires no JavaScript whatsoever: CSS Drop Column Layout.

3. Images In A Fluid Layout

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

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 Layout 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
require_once('magazinelayout.class.php');

# 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

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?

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

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.

$('#wrapper').masonry();

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

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

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 SohTanaka.com 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?

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

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">
	<li>
		<div class="block">
		Block 1
		</div>
	</li>
	
	<li>
		<div class="block">
		Block 2
		</div>
	</li>
	
	<li>
		<div class="block">
		Block 3
		</div>
	</li>
</ul>

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

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 Fruit has created a script that does something to fight this problem.

What is Text Zooming?

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

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 (%)
  addLoadEvent(textZoomInit);
</script>

Conclusion

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

You may also be interested in these additional resources:

(al)

↑ Back to top

Kayla Knight is a full-time freelance web designer and developer, and likes to blog a lot too. She also created and runs Freelance Mingle, a social network for freelancers.

  1. 1

    This was a very useful post. Thanks KNIGHT.

    0
  2. 2

    Really helpful

    0
  3. 3

    Chris Benyamin

    June 9, 2009 7:15 am

    Yeah, that article rocks. Good collection!

    0
  4. 4

    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…

    0
  5. 5

    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.

    2
  6. 6

    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!

    0
  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.
    @instantshift

    0
  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.

    3
  9. 9

    Think 700px is meant to be 640px?

    0
  10. 10

    Excellent article.
    The fluid port of the 960 grid system by Stephen Bau deserves a mention.
    http://www.designinfluences.com/fluid960gs/

    0
  11. 11

    Really a great article. Thanks SM

    0
  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.

    0
  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.

    0
  14. 14

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

    0
  15. 15

    Cool.. I liked the Text Zooming

    0
  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..

    0
  17. 17

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

    0
  18. 18

    Nice article !

    0
  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.

    0
  20. 20

    nice round up !

    0
  21. 21

    Nice post, but if I could add a missing elements, there’s some effort to build a fluid grid system based on 960 and blueprint here :

    http://fluidgrid.net/

    It’s already adapted to drupal here : http://drupal.org/project/fluidgrid

    0
  22. 22

    wow – what a great article – that really rocks man – I will forward this to our IT-team ;)
    @Luffemann

    0
  23. 23

    Very useful article!

    0
  24. 24

    Great Post! Got usefull ;)

    0
  25. 25

    Perfect article. Thanks a lot!

    0
  26. 26

    great article..thanks Kayla

    0
  27. 27

    Great article. Definitely going in my bookmarks. Fluid layouts are a stranger science.

    Thanks!
    -marchandmedia.com

    0
  28. 28

    dimension calculation on first bit is wrong, hhmmm…. ???? how can you make this long tutorial?

    0
  29. 29

    Thanks! I loved it.

    0
  30. 30

    Nice. Thanks SM!

    0
  31. 31

    Jewen Soyterkijns

    June 9, 2009 1:54 pm

    I like the text zoom, but I don’t really like dependance on javascript to make a design.

    0
  32. 32

    5. Smart Columns with jQuery & CSS

    So.. what do you “dissapear”? If it is not important enough to be on the page all the time why is it on the page to begin with?

    0
  33. 33

    Sorry about the math screw up in the first mockup everyone! Sort of a big typo….it must of happened when I was revamping the mockup at some point.

    Hopefully all of you can get the main gist of it though.

    0
  34. 34

    Fantastic article,

    This filled in many of the gaps from your last article. Your level of detail is spot-on. Let’s have more articles in this style!

    Kelly.

    0
  35. 35

    Great post! I always struggle with codes. Thank you very much for these useful tips.

    0
  36. 36

    Cool! thanks for this!!

    0
  37. 37

    That was one good article. Thanx a lot for it.

    0
  38. 38

    Thanks a lot for this great article! Must be read by all web designers.

    0
  39. 39

    Ah, yes, great, more tutorials that have almost no use in real life situations. No client will want to pay more money for such added functionality. If you try to explain to the client that he can have a single-state website (be it fluid like Digg, or rigid like Smashing) or if he pays 20%, or even more extra, he can get adaptive website that will in extremely rare occasions behave differently – you can guess what the answer will be.

    This tutorial, or study if you want, is all correctly done, but has no impact on any real web-dev situation.

    0
  40. 40

    I’m afraid that I have to agree with Daemon above. This is great theory, but to get this all to work in a real life situation would be incredibly difficult. There are a few instances it may be workable, but in the vast majority of cases this is going to cause major headaches. I don’t think you’ll find any experienced designers trying this on their clients’ sites for sure.

    0
  41. 41

    Only one stylesheet – check: Link. (400px – 1000px)

    0
  42. 42

    I think the width error is on the 220px wide div. Actually, it should be 200px, as it is said in some part of the text…

    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, 700 pixels and 200 pixels.

    That and maths about the percent width of the other div are wrong if we assume the wrapper doesn’t contain them (which is idiot). If so, you should divide by 960 for the other divs too. And so we would have :
    div1 : 880px / 960px -> 92%
    margin1 : 4%
    div2 : 700px / 960px -> 73%
    div3 : 200px / 960px -> 21%
    margin2 : 2%
    Otherwise, if we normally think the wrappper should contain other divs, we must either change the fixed widths, or use my point of view (see below)

    As a developer, i think converting fixed to fluid must change the method of calculating width. The pixels to percent conversion is only valuable for wrappers. I think what should be said for determining content width is “sidebar needs to be 3 or 4 times smaller than content div” and so we would have a sidebar at 25-20% and a content div at 75-80%.
    And i would specify percent in margins too :)

    But thanks for the tut !
    Great Job

    0
  43. 43

    Nice artical, thanks.

    0
  44. 44

    one of the best article online, covers almost all the aspects of the subject
    Thank you Kayla Knight and SM

    -1
  45. 45

    Good article. It becomes harder and harder to design a website as there are so many browsers and so many different screen resolutions today (computer, mobiles …).

    I think Fluid designs may be the solution to these screen resolution issues.

    -1
  46. 46

    Excellent post…..

    -1
  47. 47

    best article as far. I have been searching that kind of article. Thanks for all………….

    -1
  48. 48

    Very useful article… i will try it in my blogs.

    -1
  49. 49

    Thanks for this great article!

    -1
  50. 50

    Best article I’ve come across on this subject. I tend to agree with Mathias though – I will stick with fixed width – possibly ending up with separate style sheets for ranges of browser widths.

    Anthony :-)

    0
  51. 51

    I think a nice fluid layout can be done with floats.
    Let’s take smashing’s design. You have 3 columns. Make each float left, with a min/max width, and the let the body or wrapper be fluid. When you resize the windows the columns will wrap under each other if the window is below a certain width.

    0
  52. 52

    I don’t think you’ll find any experienced designers trying this on their clients’ sites for sure.

    Don’t you love it when people take their own experiences and automatically assume it’s the same for everyone else?

    Fixed margins may cause slight imperfections in the proportions but guarantees that the spacing will look right no matter what the screen size.

    You need to be careful with this that you’re setting a min-width large enough so that your fixed margin doesn’t become greater than the space left over for it at smaller screen sizes.

    1
  53. 53

    Hi, this is a really silly question but I am not really familiar with JS and there are no examples for the jquery masonry scrift anyway that I can find.
    So my (silly but important) question is, where do I put $(‘#wrapper’).masonry();?

    So far I have this is the header:
    <script type=”text/javascript” src=”/scripts/masonry.js”>

    $(document).ready(function() {
    $(‘#content’).masonry();
    });

    Any help will be much appreciated. Thanks guys.

    1
  54. 54

    Great post – a lot of useful things.

    Thanks SM :)

    0
  55. 55

    Too good to be put into one article!

    0
  56. 56

    Adaptive layouts are definitely an exciting prospect. CSS3′s media query functionality is going to make this a much simpler development too. CSS3.info has a great article on it.

    0
  57. 57

    Excellent article. Tons of useful info. Thank you!

    1
  58. 58

    Really nice article. I hope smashing magazine will adopt it, so i can read all of the articles through my mobile phone :D

    0
  59. 59

    Thanks for linking to my Fluid Grids article on ALA! Just a quick point of order, though:

    …browsers handle percentages differently, it would not be wise to put all those decimals places straight into the layout

    I disagree, and would strongly urge everyone to keep those decimal places intact in their CSS. Browsers aren’t that that different in how they truncate/round decimals, often differing by a thousandth or so. Asking the designer to round to the nearest integer can often cause layout breakage, especially when dealing with more complex grid systems.

    As for images, I’d toss my own Fluid Images technique into the ring. You can get quite a long way with using simple CSS to resize images natively in the browser, and add a quick script fix to keep IE from artifacting the images as it does.

    Thanks again!

    2
  60. 60

    Hi, this is a really silly question but I am not really familiar with JS and there are no examples for the jquery masonry scrift anyway that I can find.
    So my (silly but important) question is, where do I put $(’#wrapper’).masonry();?

    So far I have this is the header:

    <script type=”text/javascript” src=”/scripts/masonry.js”></script>

    $(document).ready(function() {
    $(’#content’).masonry();
    });

    Any help will be much appreciated. Thanks guys.

    Shane, just be sure to put the second piece of jQuery code in a set of JavaScript tags:

    <script type=”text/javascript” src=”/scripts/masonry.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function() {
    $(’#content’).masonry();
    });
    </script>

    Then use a content div with an ID of “content” appropriately. Let me know if you need any more help!

    0
  61. 61

    A better way to solve the masonry-on-resize problem is to put this with the rest of your jQuery code (outside document.ready)

    $(window).resize(function() {
    $(‘#wrapper’).masonry();
    });

    0
  62. 62

    Great! I m learning about this. I would love read more about…

    0
  63. 63

    I agree on the fact that having a fluid layout is the best option for serving all different devices and screen resolutions. But looking at all the techniques used in this article it seems to me that this is just to much cost compared to the desired effect. I have to agree with Ian Beadle and Daemon on this one. No designer / developer who works on large scaled projects will want to implement something like this.

    Besides that, resizing images in fluid layouts is a no go, on big projects you don’t want to load all the full size images just for layout sake. Costs will rise due to the fact that more data needs to be loaded every single server call. And what about caching? And embedded videos or flash video players? You gonna use javascript for that as well?

    I think it is just to early for the internet to go fluid, we need some more build in browser support for this.

    0
  64. 64

    Why not put all this code in one file to download. That way you have a complete template for everyone to use !

    0
  65. 65

    Looks like I am going to have to spend a bit of time learning this. I had a client recently who wanted a fluid website and I had the coding perfect until it all went horribly wrong so I ended up using a mix of DIVs and Tables! Thank you very much for the tutorial, I will come back to this next time.

    0
  66. 66

    can we use div tag within li tag

    i m confused now!!!

    as it has been used above for How to Get Smart Columns

    suggest plzzzz

    0
  67. 67

    Zoe Gillenwater

    July 13, 2009 7:39 am

    The fixed-width images inside a fluid box is not a problem that you need to resort to JavaScript to solve, if you don’t want to. There are lots of simple but cool things you can do with CSS to make images pseudo-flexible. I have an entire chapter of these techniques in my book Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. You can download most of this chapter for free at http://www.flexiblewebbook.com

    0
  68. 68

    Great, really useful

    0
  69. 69

    thanx for sharing this, it´s no much easier for me to design my own fluid css stylesheet!

    0
  70. 70

    very nice article. it’s very usefull for me, because I want to learn how to change my web to fluid layout.

    0
  71. 71

    Thanks for another great article, I’m still in two minds about the whole css fluid layouts thing though, especially when some main div elements are in pixels not percentage. It becomes increasingly difficult to manage.

    0
  72. 72

    We use Soh Tanaka’s ‘Smart Column’ technique in our X-Cart templates.

    We might be the only one who’s implemented it into an ecommerce template.

    All credit to him :)

    0
  73. 73

    Very very helpful guidelines Kayla, Thanks! for sharing it.

    0
  74. 74

    Thanks for sharing guys… just trying to mix masonry and Switchy McLayout (found on ALA) for a grid to fit PC_screens and cellphones (horizontal and vertical)
    i got a bug at first load, but play w/ viewport size the narrow way – you’ll see my point
    http://www.design-interactif.com/fluid_layout.html
    + one other example on blogger: http://paris-art-expos.blogspot.com/
    any clue?
    Regards from Pont_Aven

    0
  75. 75

    Nice insight into what can be done with adaptive layouts.

    For those of you who seriously want to learn more about adaptive layouts, try this book: Flexible Web Design: Creating Liquid and Elastic Layouts with CSS by
    Zoe Mickley Gillenwater [from Amazon - ISBN-10: 0321553845, ISBN-13: 978-0321553843]. I’ve got it and it’s really good.

    -1
  76. 76

    Awesome article!!! Keep up the good work!!!

    0
  77. 77

    Congratulations are in order Kayla Knight. Despite the fact this article was published back on June 9th, 2009, its content, and supporting reference articles, are the most insightful article I have come across online regarding Adaptive CSS-Layouts Fluid Layouts.

    I would be ideal, if these articles could be revised to include, if, and how new, and recently updated browsers affect Adaptive CSS-Layouts Fluid Layouts design challenges.

    If so, please keep me posted. Thanks!

    0
  78. 78

    Chrissie Brown

    May 24, 2011 2:50 pm

    I got very nice insighths while reading this article. Nevermind, it makes an heavy useage of Javascript to determine and rearrange the layout. I am interested in achieving the same using CSS3 technices without Javascript. I woulc achieve if you can stay tuned on this fact and enlighten this a bit for the future.

    0
  79. 79

    Knew that i could found this article on smashing mag after all its using all these fixed fluid thingy. me and more people are still waiting for this one. At last i won that race

    0
  80. 80

    its really great and helpful…

    0
  81. 81

    @DKumar M
    Mr. instantSHIT

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top