Question

What I’m trying to do is have three divs wrapped 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?

Answer 1

@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.