0

I want to create a layout with three <div>s, whereby my second (middle) div has a fixed width (e.g. 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>
Jonathan Lam
  • 16,831
  • 17
  • 68
  • 94
  • 1
    So what have you tried so far? – j08691 Nov 09 '15 at 20:53
  • Possible duplicate of [Make a div fill the height of the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) –  Jan 05 '17 at 11:06

1 Answers1

0

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.

Jonathan Lam
  • 16,831
  • 17
  • 68
  • 94