Grow your CSS skills. Land your dream job.

Fluid Width and Floating Object Possibilities

Published by Chris Coyier

The typical technique for making a fluid width layout is to have your main content have a minimum and maximum width and then make sure it is working in all browsers with various techniques.

Another way is to give elements on your page absolute positioning relative to the browser window itself. For instance, you can "stick" elements to the bottom of the page:

div#stickbottom {
  position: absolute;
  bottom: 0;
}

Likewise, you can stick elements to any area of the page. It gets even more interesting when you position elements with percentages. For example you could make an element always be 10% away from the right edge of the page with:

div #farright {
  position: absolute;
  right: 10%;
}

Using this technique, that "right margin" distance grows and shrinks as the user expands and contacts the browser window. This can make for some cool possibilities and interactions with other elements. You can check out an example page here.

fluidobjectsexample.gif

I'm sure you will be quick to notice that this example is making heavy use of PNG graphics with no hacks. This will look awful in IE 6 with a bunch of white backgrounds. It's just meant to be an illustration of possibilities, feel free to implement your own hacks or use GIFs or just don't use objects that require transparency.

[DOWNLOAD EXAMPLE]

Comments

  1. Timmy
    Permalink to comment#

    Don’t worry, it looks like shit in Firefox too.

  2. Wow, my first real troll!

  3. Don’t worry – We all get them from time to time.

    It actually doesn’t look too bad in Firefox, but as with any browser, the more dynamically-placed objects you have using percentages, the worse and worse the update-chop will be. Firefox just happens to be the worst for it commonly, at least I’ve found.

    However, with your techniques, if they are used appropriately and in moderation, can assist significantly.

    And, for the record, IE6 should burn in heck. Should have been a mandatory upgrade to IE7. Supporting it with any decent-looking design is a nightmare. That’s just my opinion anyways. :)

  4. @BladedThoth: Thanks, I’m glad someone found it at least mildly useful =). It was just meant to be an illustration of an idea. I wanted to use big objects and not just little squares, so you could really see this technique could potentially be used for interesting fluid layouts.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".