Bluehost: Web hosting from $3.95/month. Sign Up

Fluid elasticity

Posted on by Clive Walker in CSS Portfolio

For the last few weeks, I have been working on a fluid elastic layout for a previously fixed width website [see also Going Fluid Elastic]. At the same time, the site has been given a bit of a makeover.

The final result seems to work quite well. The layout is given a max-width of 80 ems [this equates to approx 972 px] and it resizes very well at larger text sizes. For smaller screen resolutions, the layout becomes fluid.

Unfortunately, IE6 does not support max-width but we get round this by using an IE expression for max-width in a separate IE6-only style sheet

Assuming a typical screen resolution of greater than 1024 by 768 px, most users will just see the layout as 'fixed' but the 'fluid elasticity' means that the layout is just so much more adaptive and flexible at different screen resolutions/text sizes.

Leave a comment

A simple question that helps prevent automated form fillers.

© 2016 Clive Walker