 <p>What you are looking for is a <a href="http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best">clearfix</a> so that your elements will load properly. See <a href="http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best">the linked SO question "Which method of 'clearfix' is best?"</a> for numerous possible clearfixes.</p> <p>The reason why the <code>footer</code> element places itself next to the <code>main</code> element is because absolutely-positioned elements are removed from the page flow. As a result, later elements treat the absolutely-positioned element as if it was not there in the first place. With a clearfix, this issue is resolved.</p>