Fluid Width and Floating Object Possibilities

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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]