How to keep this layout from breaking when resized?

I want to modify this layout: http://www.glish.com/css/7.asp

I want it not to collapse upon it'self when it is resized to smaller then 800x600 resolution.

I tried adding min-width: 760px; to the body tag, but that still lets the right column collapse in and slide on top of everything else, although it does make the rest of the columns solid.

Edit: It also acts the same way when I create a wrapper div and give it the 760px minimum width. Just that right column seems to break free.

Edit2: This is weird, I just removed the min-width: tag and then put it back in, and now when I preview it in the different browsers it doesn't change it at all like when I first put it in. I'm pretty sure I didn't mess up any code, but I guess I'll start from scratch again to be sure.

Edit3: I guess I did mess something up, cause I started from scratch again and got the original effect from setting the minimum width.

 

That's a good reason AP based layouts should be avoided; they have gotchas that will bite you on the butt if you don't fully grok how they work. They are also fragile, being easily broken, as a rule. One reason float layouts are generally preferred is that they tend to be more robust.

The AP elements' positional reference must be positioned, and in IE's case must also have layout.

(assuming standards mode)

#wrapper {
  min-width: 760px;
  position: relative;
  display: inline-block; /*triggers hasLayout in IE*/
  }

#wrapper {
  display: block; /*undoes the display hack without unsetting hasLayout*/
  }

#banner {
  height: 50px;
  }

#col-a {
  position: absolute;
  top: 50px;
  left: 0; /*top and left shouldn't be necessary, but IE screws it up*/
  width: 190px;
  padding: 5px;
  }

#col-b {
  position: absolute;
  top: 50px;
  right: 0;
  width: 190px;
  padding: 5px;
  }

#main {
  margin: 0 200px;
  padding: 5px;
  }
==========
<div id="wrapper">
  <h1 id="banner">header</h1>
  <div id="main">
    <h2>main content</h2>
    ...
  </div>
  <div id="col-a">
    <h2>column header</h2>
    ...
  </div>
  <div id="col-b">
    <h2>column header</h2>
    ...
  </div>
</div> <!-- end wrapper -->

Code (markup):

Modern browsers, and even IE7, should work OK with this. IE6? Well, it's just not a very good browser.

cheers,

gary