Fixed, Fluid, Elastic Layout

Fixed, Fluid, Elastic or a hybrid layout design – Each option has its own benefits and disadvantages. But the final decision depends so much on usability that it is not one to be made lightly.

In CSS the width of a box is set using the width property with any unit of length, for example:
DIV#col1 {
width:400px }

DIV#col2 {
width:50% }

DIV#col3 {
width:33em }

Fixed Layout

column 1 has a fixed width: it has been set to 400 px wide. With text rendering at 12 px this would result in a measure of approximately 66 characters per line. If your reader increases the text size to 16 px then the measure reduces to 50 characters per line. Thus when the text size is changed, so the measure changes.

A fixed width site is one where the main wrapper is set to a specific immovable width independent of the user agent’s display resolution. A common and considerate fixed width is 760 pixels, a size that ensures users with 800×600 resolution monitors have close to full window viewing without annoying side-scrolling.

This fixed-width div is 400 pixels wide. This example cannot be resized due to its fixed width. If the text is enlarged, it’ll wrap.

Fluid Layout

Column 2 has a liquid width: it has been set to 50% wide. Assuming your reader is browsing with a window 1000 px wide, the box would be rendered as 500 px wide, resulting in a measure of about 83 characters per line. A measure of 83 may be a little too wide for your reader, but because the box is liquid, your reader could reduce their window size to 800 px, thus narrowing the box to 400 px and creating a more comfortable measure of 66 characters per line.

A fluid or liquid layout is created by not specifying a wrapper width at all or doing so using the percentage unit of measure. In other words, barring borders and padding screwing things up, a 100% width site will take up the entire view port width without producing a horizontal scroll bar.

This fluid-width div is 74% of the container’s fixed width. This example cannot be resized due to its fixed width parent. Changing screen size will have no bearing and if the text is enlarged, it’ll wrap.

Elastic Layout

Column 3 has an elastic width: it has been set to 33 em wide. On average one character takes up 0.5 em so this box will have a measure of 66 characters per line. If your reader increases the text size, the width of box will increase accordingly and so the measure remains at 66 regardless of the text size.

An elastic site’s main wrapper and other elements are measured using ems as the unit of measure. Ems are relative proportionally to the text or font size. Thus, as the text size is increased, the sections measured in ems will increase in size as well.

This elastic-width div is 35ems wide. This example will change width as the text is enlarged, but this example has no width limiter.

Tags: % examples, Elastic Layout, em, Fixed, Fluid, px

This entry was posted on Monday, May 10th, 2010 at 5:36 am and is filed under Css Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

D S Kaletha