Push down div when above div expands? - html

Question

Making a single page website. The HTML is as follows
<!-- Landing Page-->
<div id="landing">
<img src="front.png" alt="Cover Page">
</div>
<!-- About -->
<div id="page1">
<a id="about"></a>
<img src="Who.png" alt="About Me">
<p>
xxx
</p>
</div>
<!-- Work -->
<div id="page2">
<a id="portfolio"></a>
<div id="container">
<a class="fancybox" href="portfolio1.jpg" title="'Consumed' </br>Digital/Print Work"><img src="portfolio1s.png"/></a>
</div>
</div>
<!-- Contact -->
<div id="page3">
<a id="contact"></a>
<img src="Contact.png" alt="Contact Information">
<p>
xxx
</p>
</div>
</body>
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:
#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:purple;
}
#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;
}