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.

• On Moz and co the text will just flow on behind the right column.
• On IE real problems!! Since the text will extend the width of the container which will break the algebraic balance of the layout.

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

Tertiary Content

Check List

• Firefox 0.7+
• Opera 7+
• Opera 6
• IE 6
• IE 5.x
• Netscape 7

Partial Support

• Netscape 4.7

Close White Margin

Edit in the page This bookmarklet allows in-page editing. Cut and paste to resize the columns. (In IE double click column to focus text. Will not work in Opera.)