2.3 Elastic Layouts

Elastic layouts tend to use em units for specifying widths and also have a max-width speficifed to ensure that the content is not too long. Elastic width layouts stretch when font sizes are increased or decreased, which is why they are termed elastic - because they flex to accomodate the browser width and visitor's font preferences.

Benefits

  • Elastic layouts operates like a fixed layout when using the default font size;
  • Thse layouts maintain design proportions as the font size is increased or decrease;
  • Overcomes many issues with the fixed and liquid layout approaches.

Drawbacks

  • Elastic layouts can result in horizontal scrolling if the the font is sized up too much, although this is easily fixed with max-width (to say something like 100%) and min-width
  • Creating flexible images is difficult;
  • Many browsers offer zoom technology these days.

In our stylesheet we could have:

#wrap		{width: 60em;
		margin: 0 auto;
		padding: 0;
		text-align: center;
		background-color: yellow;}

#header		{background-color: orange;}

#leftcol	{display: inline;
		float: left;
		width: 12em;
		margin-left: -48em;
		background-color: red;}

#content	{display: inline;
		float: left;
		width: 36em;
		margin-left: 12em;
		background-color: blue;}

#rightcol	{float: left;
		width: 12em;
		margin-left: 0%;
		background-color: red;}

#footer		{clear: both;
		background-color: orange;}

The HTML markup would be just as before and note again we are including the main content section before the right and left columns, and using float and negative margins to display the left column, main content and then right column in this order. It is good for search engine optimisation (SEO) to have the important information nearer the top of a html document. The only real difference here is that the widths have been specified in em units. The wrap container is 60ems, which by default = 16px x 60 = 960px. This would look like this: (try resizing the text):

Downloading Web Templates

You will no doubt have noticed that on the Internet there are countless sites offering free or charged web page templates to download. By all means download and play around with the free ones but don't actually pay for any of these. After all, flashy background graphics aside, what colour are the backgrounds of the most successful websites out there such as Ebay, Facebook, Google etc, to name but a few? The answer is: WHITE! (but with a few nice touches here and there). The goal of any website should be to convey the relevant information with elegance. Some of the best sites out there have white backgrounds but with well designed headers and footers, and a subtle colour / design theme running throughout. You can browse some free web templates on this very site.