View Full Version : How to build scaleable, elastic layouts?

08-29-2010, 04:13 AM
Is it possible to build, at once, a scaleable AND elastic layout?

If so, does anyone know how this is done? I have been wracking my brains to try and work it out.

It makes sense to (and I'm recently familiar with the process to) use em measurements in the layout but - and this is where I'm coming unstuck - ems are not good for inline images for, when they scale, they can not only pixelate badly but also defy their original positioning. It also causes problems with background tiling.

I have tried to make a mixed em and px layout but this makes certain columns disappear and I cannot, for the life of me, work out why this is happening.

I've scrubbed everything and started from scratch. A whole week's work in the bin. This time, I want to start out as I mean to carry on and avoid wasting any time. Can anyone please advise on the best, most portable and most efficient way of laying out simple columns, so they don't fall apart when actually used on the www?

This whole can of worms is making me wonder if claims that CSS P portability, across screen sizes and types of devices, is actually true.



Dr. V

08-29-2010, 04:45 AM
You get your images pixalated couse you are using bitmaps instad of SVG files. A vector graphic has a pattern to draw a line, shape, whatever so its scalable.

You should transform lor bitmaps to SVG files, with inkscape maybe.

And btw, many sites use a simple image repited so get a styled background.

08-29-2010, 09:26 AM
Have you seen this article (http://www.ibm.com/developerworks/web/library/wa-rapid/).

And this one. (http://www.maxdesign.com.au/articles/liquid/)
More grist for the mill. (http://www.cssliquid.com/)


08-29-2010, 09:58 PM
Cheers Frank. Been reading through some of those. Especially the layouts with no tricks and hacks. Certainly puts all this this faux columns nonsense into perspective. Great link, many thanks, mate.

Dr. V

Drummond Lorn
10-08-2010, 09:33 AM
Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of dives in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing

Profile Design ( http://www.myspaceprofile-layouts.com/)