Fluid Width and Floating Object Possibilities
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.
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.
Loading ...
1
Don’t worry, it looks like shit in Firefox too.
Comment by Timmy — October 16, 2007 @ 10:54 am
2
Wow, my first real troll!
Comment by Chris Coyier — October 16, 2007 @ 11:01 am
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.
Comment by BladedThoth — October 20, 2007 @ 9:28 pm
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.
Comment by Chris Coyier — October 21, 2007 @ 6:20 am