Search code examples
csshtmlcss-floatstylesheet

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

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

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?

Solution

  • 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/