• Back to Post
• 2 Column Elastic Layout
• 3 Column Elastic Layout

Header

Main content

#container {
  max-width: 75em;
  margin: 0 auto;
}

#content {
  float:left;
  width:67%;
}

#content p {
	max-width:80%;
}
		

Elastic layouts are those that set measurements relative to something internal to the design, usually the size of the type. Fluid layouts on the other hand set measurements relative to the browser which is external to the design.

Moving from a fluid layout to an elastic layout is a simple matter of changing units on the outermost container. Changing the width of the container from % to 'em' changes the layout from being relative to the browser to relative to the font-size

In this demo I've also set max-widths on the paragraphs inside the content and sidebar divs. This should help keep lines of text from growing too large.

Sidebar

#sidebar {
  float:left;
  width:33%;
}

#sidebar p {
	max-width: 90%
}
		

Both sidebar and content have widths set as a % of their parent element. Here the parent for both is #container, which is set in 'em' making both #content and #sidebar relative to the font-size.

Try to use 'em' for vertical measurements and those specifically involving text sizes. Use % for horizontal measurements like width to ensure they're relative to their parent containers.

Footer