I have 3 divs in a parent div which looks like this:

```
<div id="maincontent>
  <div class="left"></div>
  <div class="mainbody"></div>
  <div class="right"></div>
</div>

```

The website is 1000px wide.

What I need is to keep the `.mainbody` div at a minimum of 570px, but have it expand if one of the other 2 divs is removed from the page, which are each given 215px width.

All 3 divs are also floated left.

I tried using `min-width` and `max-width` on `.mainbody` but it doesn't really work. Any other ideas?

My current CSS:

```
#maincontent {

  width: 100%;
  overflow: hidden;
}

.left, .right, .mainbody {

  float: left;
}

.left, .right {

  width: 215px;
}

.mainbody {

  width: 570px;
}

```