Getting three divs to auto resize when the content in the middle one changes

What I'm trying to do is have three divs 开发者_如何学Gowrapped in a fixed width container that will auto resize when the content in the middle div expands. As the middle gets larger the two beside it get smaller if that makes sense.

<div id="container">
  <div class="one"/>
  <div class="middle">...</div>
  <div class="two"/>
</div>

Not sure if I should be using div or span for this.

Any advice on the CSS?

@thirtydot The two divs at the side of the middle div will contain nothing, just a border-top, the middle div will contain two links. :)

In that case, I'm answering with something simpler that you might be able to use.

See: http://jsfiddle.net/uZ5dn/

<div class="container">
    <span class="middle">content con tent the tent of cons content content</span>
</div>

.container {
    border-top: 5px solid #f0f;
    text-align: center;
}
.middle {
    background: #fff;
    display: inline-block;
    position: relative;
    top: -5px; /* same as border-top-width */
}

It's not awesome, but it might be good enough.

At the very least, I'll get a better idea of what to suggest next.

If I'm reading your question correctly, I suspect that you'll have to do this with JavaScript, and DIVS.

You can get and set the actual size of the DIVs in pixels using the .height() function.

So, you could do something like:

if ($('#div2').height() > 200) {
   $('#div1').height(100);
   $('#div3').height(100);
} else {
   $('#div1').height(200);
   $('#div3').height(200);
}