Making a single page website. The HTML is as follows\[code\]<!-- Landing Page--> <div id="landing"> <img src="http://stackoverflow.com/questions/14517485/front.png" alt="Cover Page"> </div> <!-- About --> <div id="page1"> <a id="about"></a> <img src="http://stackoverflow.com/questions/14517485/Who.png" alt="About Me"> <p> xxx </p> </div> <!-- Work --> <div id="page2"> <a id="portfolio"></a> <div id="container"> <a class="fancybox" href="http://stackoverflow.com/questions/14517485/portfolio1.jpg" title="'Consumed' </br>Digital/Print Work"><img src="http://stackoverflow.com/questions/14517485/portfolio1s.png"/></a></div> </div> <!-- Contact --> <div id="page3"> <a id="contact"></a> <img src="http://stackoverflow.com/questions/14517485/Contact.png" alt="Contact Information"> <p> xxx </p> </div></body>\[/code\]I removed the image links from the div #container, but altogether there are more than 10. My issue is when I make the window narrow (to see how it will be viewed on a mobile device), the images in div #container overlap with my image on my contact page. I would like it such that when it expands, it pushes the contact page down. I've tried doing this with position:relative, but doesn't seem to work.Relevant CSS:\[code\]#container{padding:50px;display:table-cell;vertical-align:center;width:auto;}#container a img{padding:10px;opacity:1.0;filter:alpha (opacity=100); /*for >IE8 */}#page1 img {display:block;margin-left:auto;margin-right:auto;width:400px; position:relative;top:15px;}#page2 {height:1200px;font-family: Arial, sans-serif;font-weight: bold;color
urple;}#page3 {height:1200px;font-family: Arial, sans-serif;font-weight: bold;color:red;}#page3 img{display:block;margin-left:auto;margin-right:auto;margin-bottom:-20px;width:400px;position:relative;top:15px;}\[/code\]
urple;}#page3 {height:1200px;font-family: Arial, sans-serif;font-weight: bold;color:red;}#page3 img{display:block;margin-left:auto;margin-right:auto;margin-bottom:-20px;width:400px;position:relative;top:15px;}\[/code\]