Relative-ly Easy Fixed-idity v1.0

Primary Content

Contained box fixed widths.


#cont {
  width:600px;
  margin:0 auto;
}

#middle {
  float:left;
  width:300px;
  margin:1em -449px 1em 150px;
  background:#f5dcdc;
  display:inline;  
}

#left {
  float:left;
  width:145px;
  margin:1em 0 1em -1px;
  background:#dcdcf5;
}

#right {
  float:right;
  width:145px;
  margin:1em 0;
  background:#dcf5dc;  
}

#foot {
  clear:both;
  background:#dcdcdc;
}

Secondary Content

Gotchas

A problem occurs when preformatted text extends beyond the width of the column. The result is browser-dependent.

Possible solutions include:

  1. overflow:auto on the parent container of the preformatted text
  2. declare pre {white-space: normal;} and use linebreaks in the markup - semantically poor!

Close White Margin