CODEWITHSUNDEEP
csshtmlcss-floatstylesheet
user1169629
user1169629

Reputation: 467

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?

Upvotes: 0

Views: 172

Answers (2)

PeeHaa
PeeHaa

Reputation: 72672

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/

Upvotes: 2

D Blacksmith
D Blacksmith

Reputation: 123

use CSS3 calc() function

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

Caniuse calc()

Upvotes: 3

Related Questions