Div not expanding to fill the window <p>I've been trying to find a solution to this for days, but haven't found anything that works. I thought I'd finally make an account on this great website, so here goes:</p> <p>I am trying to have a div expand from left to right, with 170px of clearance on both sides. However, when there is no content on the page, or only a few words, the div doesn't expand. I've tried to add width: 100% in several different divs to try and have them take up the full space, but that either does nothing, or completely busts the page layout. for example, instead of filling out the page, the div that's supposed to hold the content moves off the right side of the screen, and also doesn't leave the 170px margin.</p> <p>I hope you can be of help, my code is posted below: Thanks in advance, Chris</p> <p>the html:</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="pagetopwrap"&gt; &lt;/div&gt; &lt;div id="pagemainliquid"&gt; &lt;div id="pagemainwrap"&gt; &lt;div id="content"&gt; &lt;div id="headerwrap"&gt; &lt;div id="header_left"&gt; &lt;/div&gt; &lt;div id="header_main"&gt; &lt;div id="logo_row"&gt; &lt;p id="logotext"&gt;Site Title&lt;/p&gt; &lt;/div&gt; &lt;div id="menu_row"&gt; &lt;!-- irrelevant menu button code --&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="header_right"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="contentbody"&gt; &lt;div id="contenttext"&gt; &lt;p id="contenttextmakeup"&gt;Lorum Ipsum Dolor Sit Amet&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="leftcolumnwrap"&gt; &lt;div id="leftcolumn"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="rightcolumnwrap"&gt; &lt;div id="rightcolumn"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="footerwrap"&gt; &lt;div id="footer"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>the css: It is not ordered too well, the uninteresting sides, top and footer are first, and the main part of the website at the bottom</p> <pre><code>body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; background-color: #0f0f0f; /* is normally an image */ } #wrapper { width: 100%; min-width: 960px; max-width: 1920px; margin: 0 auto; height: 100% } #pagetopwrap { height: 50px; width: 100%; float: left; margin: 0 auto; } #pagemainliquid { float: left; } #pagemainwrap { margin-left: 170px; margin-right: 170px; float: left; } #leftcolumnwrap { width: 170px; margin-left:-100%; float: left; } #leftcolumn { margin: 5px; } #rightcolumnwrap { width: 170px; margin-left: -150px; float: left; } #rightcolumn { margin: 5px; } #footerwrap { width: 100%; float: left; margin: 0 auto; clear: both; bottom:50px; } #footer { height: 0px; margin: 5px; } #headerwrap { width: 100%; margin: 0 auto; } #header_left { background-color: #ff0000; /* is normally an image */ width:25px; height:200px; float:left; } #header_right { background-color: #ff0000; /* is normally an image */ width:25px; height:200px; margin-left: 0px; float:right; position:relative; top:-200px; } #header_main { background-color: #00ff00; /* is normally an image */ margin-left: 25px; margin-right: 25px; height:200px; background-size: 100% 200px; } #contentbody { background-color: #E2E2E2; border-radius: 10px; margin-top:10px; border: 1px solid #A7A7B2; } #contenttext { margin-left:10px; margin-right:10px; } #logo_row { height:150px; width:100%; float:left; } #logotext { margin-top:20px; margin-left:10px; vertical-align: middle; font-size: 55px; font-family: "Arial Black", Arial; } #contenttextmakeup { margin-top:12px; margin-left:10px; vertical-align: middle; } #menu_row { width:100%; } button.menubutton { /* irrelevant button markup */ } </code></pre> <p><a href="http://jsfiddle.net/w9qLh6tp/" rel="nofollow">http://jsfiddle.net/w9qLh6tp/</a> if that helps, I've seen it a lot around here :)</p>