How do I dynamically size my divs to occupy the maximum possible width?

Question

I need to accomplish the following situation for the header of my website:

So, the image in the middle needs to be centered and has a fixed width. On the left and right of that image are divs that should occupy the remaining space.

Of course I could use javascript to listen on screen-width changes, but as this construct represents the logo of the corporate identity, a js solution would be ugly as it would resize the divs only when the user stops dragging and not continuously while dragging.

Also note that the divs should never wrap, all 3 elements should always be on a horizontal line. If the screen size is 150px, the divs should have a width of 0px and only the image should be visible.

Any ideas?

Answer 1

If you need to support IE8 I would use display: table-cell:

<div class="table">
    <div class="outer">div</div>
    <div class="image">image</div>
    <div class="outer">div</div>
</div>

div {
    display: table-cell;
}

div.table {
    display: table;
    width: 100%;
}

Something like: http://jsfiddle.net/R68eQ/

Answer 2

use CSS3 calc() function

.left-div{
    width: calc((100% - 150px) / 2);
}

Caniuse calc()