How to place 2 divs next to each others with fixed position and 100% Height <p>I'm trying to create 2 <code>div</code>s, one of them is the left sidebar and the other one is the body of the page where content shows up. What I'm trying to do is:</p> <ul> <li>make the sidebar div height 100% </li> <li>the body height 100% too</li> <li>make the body's width change when sidebar width changes.</li> </ul> <p>This is the code that I've tried so far:</p> <pre><code>#Sidebar{ background-color:#F0F0F0; height: calc(100% - 80px); width: 257px; position: fixed; left: 0; bottom: 0; overflow: hidden; white-space: nowrap; } #content { margin: 0; position: fixed; height: 100%; } </code></pre> <p>when I do this, the content <code>div</code> shows IN the Sidebar!</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#Sidebar { height: calc(100% - 80px); width: 257px; position: fixed; top:0; left: 0; bottom: 0; overflow: hidden; white-space: nowrap; border:1px solid #000; } #content { margin: 0; position: fixed; height: 100%; border:1px solid tomato; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="Sidebar"&gt; Hello World!! &lt;/div&gt; &lt;div id="content"&gt; Content Div &lt;/div&gt;</code></pre> </div> </div> Note that i use Jquery .Resizable to change the width. and this is a jsfiddle <a href="https://jsfiddle.net/j64r3bm1/" rel="nofollow">https://jsfiddle.net/j64r3bm1/</a></p>