I'm trying to position the blue `<div>` which is 700px x 75px below the yellow (main text area). The yellow area will differ in size depending on each page but the blue area will be a footer for copyright etc. 

![enter image description here](https://i.stack.imgur.com/N4DHI.jpg)

Below is the CSS so far. 

```
body    
{
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
background: white;
margin: 50px 0px 0px 0px;
}

#header 
{
height: 75px;
width: 900px;
margin-right: auto;
margin-left: auto;
padding: 0px 0px 0px 0px;
position: relative;
}

#socialmediaicons
{
position: absolute;
height: 35px;
top: 30px;
right: 0;
border: 0;
}

.socialmediaicon
{
padding-left: 5px;
}

#maincontent
{
width: 900px;
height: auto;
background: red;
padding: 0px 0px 0px 0px;
margin-left: auto;
margin-right: auto;
position: relative;
}

#mainmenu
{
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size: 20px;
position: absolute;
left: 0px;
top: 0px;
}

#gallery
{ 
position: absolute;
left: 200px;
top: 0px;
visibility: hidden; 
border: 0px;
width: 700px;
height: 350px;
background: yellow;
}

#maintextcontainer
{
position: absolute;
background: yellow;
top: 350px;
left: 200px;
width: 700px;
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size: 20px;
}

#footer 
{
height: 75px;
width: 700px;
background: blue;
padding: 0px 0px 0px 0px;
}

p.maintexttitle
{
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size: 30px;
}

p.maintext
{
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size: 16px;
}

```

Here is the HTML

```
<div id="header">

<div id="socialmediaicons">
<a href="https://www.facebook.com/pages/SCNI/277418002319495"            target="_blank" onmouseover="image1.src=loadImage1.src;"  onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="images/socialmedia/sm1_off.jpg"   class="socialmediaicon" /></a>

<a href="https://twitter.com/scnidesign" target="_blank" onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;">
<img name="image2" src="images/socialmedia/sm2_off.jpg" class="socialmediaicon" /></a>

<a href="http://instagram.com/scnidesign" target="_blank" onmouseover="image3.src=loadImage3.src;" onmouseout="image3.src=staticImage3.src;">
<img name="image3" src="images/socialmedia/sm3_off.jpg" class="socialmediaicon" /></a>

<a href="http://www.smicon4.com" target="_blank" onmouseover="image4.src=loadImage4.src;" onmouseout="image4.src=staticImage4.src;">
<img name="image4" src="images/socialmedia/sm4_off.jpg" class="socialmediaicon" /></a>

<a href="https://dribbble.com/SCNI" target="_blank" onmouseover="image5.src=loadImage5.src;" onmouseout="image5.src=staticImage5.src;">
<img name="image5" src="images/socialmedia/sm5_off.jpg" class="socialmediaicon" /></a>
</div>

</div>

<div id="maincontent">

<div id="mainmenu">
<img src="images/logo.jpg">
<p class="mainmenu"><a href="index.html" class="mainmenu">home</a></p>
<p class="mainmenu"><a href="about.html" class="mainmenu">about</a></p>
<p class="mainmenu"><a href="work.html" class="mainmenu">work</a></p>
<p class="mainmenu"><a href="work.html" class="mainmenu">services</a></p>
<p class="servicesmenu"><a href="design.html" class="servicesmenu">design</a>     </p>
<p class="servicesmenu"><a href="development.html"     class="servicesmenu">development</a></p>
<p class="mainmenu"><a href="contact.html" class="mainmenu">contact</a></p>
</div>

<div id="gallery"></div>

<div id="maintextcontainer">
<p class="maintexttitle"><strong>welcome</strong></p>
<p class="maintext">At SCNI Design, we offer cost effective Logo, Graphic  and Website design and developmental services to small businesses across the   globe.</p>
</div>

<div id="footer"></div>

</div>

</body>

</html>

```

I was able to get the divs aligned on top of eachother but now there is a gap between each. see screenshot. there shouldn't be any red between green, yellow and blue sections.![screenshot](https://i.stack.imgur.com/N4DHI.jpg)