expanding center of 3 div dividers to fit the width of the parent div container

advertisements

I have a parent div, with 3 inner divs that are floated. The left and right divs are statically sized, but I would like the center div to expand to the fit the parent container.

<div class="parent-container">
    <div class="left"></div>
    <div class="center">this should expand to fit the parent container</div>
    <div class="right"></div>
<div>

.parent-container
{
    overflow: auto;
    width: 100%;
    border: 1px solid pink;
}

.left { width: 50px; }
.right { width: 80px; }

.left, .center, .right
{
    float: left;
    border: 1px solid black;
    height: 100px;
}

http://jsfiddle.net/fvuyQ/

I have tried setting the width to 100%, but that doesn't work. Is there a simple way to do this?


If you're OK with using CSS3 you can use the calc() function coupled with box-sizing: border-box

Working fiddle: http://jsfiddle.net/EfrainReyes/4usMS/

Note: The reason why I added box-sizing: border-box was to make it easier to calculate the center div's width. If you don't want box-sizing: border-box you can substract the sum of the widths of the left and right borders on the floating divs, which amounts to a total of 6px, like this:

.center { width: calc(100% - 50px - 80px - 6px); }

Edit: Updated the example to use CSS2 positioning instead of CSS3 calc() http://jsfiddle.net/EfrainReyes/4usMS/1