 <p>I was looking for the a solution to the opposite problem where I needed a fixed width div in the centre and a fluid width div on either side so I came up with the following and thought I'd post it here in case anyone needs it.</p> <p>HTML:</p> <pre><code>&lt;div id="wrapper"&gt; &lt;div id="center"&gt; This is fixed width in the centre &lt;/div&gt; &lt;div id="left" class="fluid"&gt; This is fluid width on the left &lt;/div&gt; &lt;div id="right" class="fluid"&gt; This is fluid width on the right &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#wrapper { clear: both; width: 100%; } #wrapper div { display: inline-block; height: 500px; } #center { background-color: green; margin: 0 auto; overflow: auto; width: 500px; } #left { float: left; } #right { float: right; } .fluid { background-color: yellow; width: calc(50% - 250px); } </code></pre> <p>If changing the width of the <code>#center</code> element then you need to update the width property of <code>.fluid</code> to:</p> <pre><code>width: calc(50% - [half of center width]px); </code></pre>