Primary Sidebar

#primary {
  float:left;
  width: 25%;
}

The key to creating elastic layouts is to set measurements relative to something internal to the design, usually the size of the type.

The easiest way to do this is to set the outermost container in 'em' units.

Main content

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

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

Inner containers can be set using % measurements which are relative to the parent container.

If the outermost container is set in 'em' and the inner containers are set in % everything will ultimately be relative to the font-size.

To create elastic grids you can do the initial math using absolute px measurements and then use the following formula to convert to relative measurements.

target ÷ context = result

Seconday Sidebar

#secondary {
  float:left;
  width:25%;
}

One potential gotcha is if you change font-sizes on internal containers. That can change the context of measurements inside the container.

You can mitigate this problem by changing font sizes on elements other than the containers themselves.