Elastic Layout
In Elastic layouts the size of the columns or sections is bounded to the font size being used.
The width are specified in em(s), as shown in the figure below,
Em(s)
Em(s) are a unit of measurement. This unit derives its size from the point size of the current font in use. If the current font size consist of 16 points, then 1 em would mean 16 points and 2 em would mean 32 points.
In simple words, 1 em means equal to the size of current font, 2 em means twice the size of current font, 3 em means three times the size of current font and so on.
Features
The Elastic layout is a design relative to font size, so increasing the font size of the browser will make blocks bigger in size and decreasing the font size will make blocks smaller.
Pros
- Elastic layouts are independent of the display resolution used.
- Since they are relative to the font size used, every thing stays proportional to user's setup.
- Fuild layouts adapt completely to the users display setup using fonts.
- Elastic deisgns can provide you a compromise between Fixed and Fluid layouts.
Cons
- Binding everything to font size is not favourable some times.
- Desiging this layout is difficult then the other two in terms of getting everything right.
- Resizing this layout changes or can disturb the text formatting. For example, a single line text can be broken into two or three lines.
Conclusion
Choosing between these layouts depends largely on the website's design. You may have to experiment with one or two to come up with a better option. This may lead you to choose a hybrid layout, where you mix two layout techniques.
What ever layout you use, knowing the difference between these layouts enable you to chosse the better option for your design and apply it to your web site.
Related:
Fixed Layout
Fluid or Liquid Layout
Design Layout
Link to this page :
Copy and paste the following code in an html document to link to this page,