3x3 table with fixed corners

I'm trying to make a frame in this case a 3x3 table (using CSS) keeping the corners fixed in size and making the rest of the table stretch according to the "cell" in the interior. Using the classic tables it would have probably took me no more than 10 minutes but because I've encountered problems with tables in the past *cough *cough IE *cough I've decided to try the CSS way using div-s an开发者_如何学JAVAd span-s but for some reason it just doesn't show right.

Can I have some hints?

I'm not sure I'm understanding your question right, but I think you're just looking for <div>s with 33% width, with a clearing <br /> after every three (or you could keep each row in a containing div of it's own):

CSS:

  .col {
    float: left;
    width: 33%;
  }

  /* color columns for clarity */
  .odd {
    background-color: #999;
  }

  .even {
    background-color: #666;
  }

HTML:

<div class="col odd">1</div>
<div class="col even">2</div>
<div class="col odd">3</div>
<br style="clear: both;" />
<div class="col even">4</div>
<div class="col odd">5</div>
<div class="col even">6</div>
<br style="clear: both;" />
<div class="col odd">7</div>
<div class="col even">8</div>
<div class="col odd">9</div>

Is that what you're looking for?