Filling space with centered, fixed-width div

Question

I want to create a layout with three <div> s, whereby my second (middle) div has a fixed width (eg 300px). My other two <div> s, should equally fill the rest of the parent element.

I'd love to solve it with some kind of percentages for the left and right <div> s, so it is horizontally scaleable.

<div>
    <div class="rest"></div>
    <div class="center"></div>
    <div class="rest"></div>
</div>

Answer 1

You can set the width property of the other two <div> s to calc(50% - 150px); .

div.rest {
    width: calc(50% - 150px);
    width: -webkit-calc(50% - 150px);
    width: -o-calc(50% - 150px);
    width: -moz-calc(50% - 150px);
}

See this example on JSFiddle .