How do I put div after div with fixed position? <p>I'm trying to create a front page in which i am using something like this:</p> <pre><code>&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;My Page&lt;/title&gt; &lt;link href="style.css" rel="stylesheet" type="text/css"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="header"&gt; &lt;h1&gt;Header&lt;/h1&gt; &lt;br/&gt; &lt;/div&gt; &lt;div id="box1"&gt; Content &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;`enter code here` </code></pre> <p>And my css is </p> <pre><code>#header{ position:relative; text-align:center; width:100%; margin-left:0%; color:#FEA13A; text-shadow:#CCC 1px 1px 1px; font-size:22px; background:#000000; } #box1{ width:80%; position:relative; margin-top:10px; margin-left:20%; margin-right:20; } #wrapper{ width:100%; position:absolute; } </code></pre> <p>I want to be able to use fixed position in every part of the page to adjust to the screen but when I use "position:fixed;" on the first header, everything after it doesn't take the positioning properly.</p> <p>How to solve this?</p>