absolute position div disappers inside parrent div <p>I am trying to put simple divs and arrange them, but my child div disappearing from parent div even though I am using parent div with relative and child div with absolute positioning. I want connect_us_01 and registeration divs insideheader_block1. I am working towards responsive webdesign. Many thanks.</p> <p><a href="http://jsfiddle.net/aNzEB/" rel="nofollow">JSFiddle</a></p> <pre><code>&lt;div id="header"&gt; &lt;div id="header_block1"&gt; &lt;div id ="registeration"&gt;reg&lt;/div&gt; &lt;div id ="connect_us_01"&gt;social media&lt;/div&gt; &lt;/div&gt; &lt;div id="header_block2"&gt; &lt;div id="crown_logo"&gt;logo&lt;/div&gt; &lt;div id="nav"&gt;navigation&lt;/div&gt; &lt;div class="contact_No_01"&gt;020324234233&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <h2> css</h2> <pre><code>#header { position: relative; width: 100%; background-color: #ff6a00; } #header_block1 { position: relative; margin: 0 auto; width: 90%; background-color: pink; } #header_block2 { margin: 0 auto; width: 90%; position: relative; background-color: aqua; } /*----social media &amp; connect us block*/ #connect_us_01 { position: absolute; width: 300px; height: 50px; right: 0; background-color: blue; } #registeration { position: absolute; left: 1px; width: 200px; height: 50px; background-color: brown; } </code></pre>