Elastic Design is a cool way of designing the layout of our websites so that the layout doesn’t change according to the size of the browser and user’s font preference.
It uses ems for setting widths and a max-width style to ensure that the content is not too long. Since the size of an em is relative to the size of the font, the layout stretches when the font size is increased and it flexes to accomodate the browser width.
We can start by building a checklist of what an ideal layout would offer :
- Fixed/Static layouts usually have fixed dimension values and are not designed to change according to the size of the text and are thus restrictive.
- Fluid layout is yet another type of layout similar to what we want,the widths of most components are set in percentage value so that the layout can adjust according to the user’s browser settings. But they become inconsistent and difficult to control as the lengths of lines change. Max-width must be set to prevent line-lengths becoming too long on wider screens.
- As Elastic design uses “Em” to set dimensions,the layout remains consistent when the font size is changed. However, they don’t expand to use the available space until the text size increases.
Elastic design can be a viable option as it can not only adjust dimensions according to users setting but can also help in utilizing the extra space with more content, making the site visually appealing.Advantages of Elastic Layouts:
- Content is displayed in the same manner on smaller screens as on wider screens.
- On wider screens it makes optimal use of available space.
- The layout maintains consistency and doesn’t break up regardless of screen sizes or text sizes
Code
CSS:
body {min-width:640px}
#header,#menu,#content,#sub-section,#footer {
overflow:hidden;
display:inline-block
}
/* safari and opera need this */
#header,#footer {width:100%}
#menu,#content,#sub-section {float:left}
#menu {width:20%}
#content {width:60%}
#sub-section {width:19.9%}
#footer {clear:left}
HTML: