Why does the element drop down - html

Question

basically i have 3 images and a div.contact sitting next to each other contained in a Section.gallery. div.contact has been floated right and relatively positioned but not the images .
My problem is that i cant get the 'NEWSLETTER' in the footer to occupy the available space on the right, it keeps dropping down.
However when apply a clear:both to footer see what happens.It Creates a huge space between the footer and the Section.gallery ,but 'NEWSLETTER' takes up all the space
When i check with google chrome inspect element, there is a big margin that i did not apply.
The relevant code
the HTML part
<section class="gallery">
<div class="display-gallery">
<img src="images/picture.png" />
<img src="images/picture.png" />
<img src="images/picture.png">
</div>
<!--End gallery-->
<div class="contact">
<p>contact</p>
<h2>booking <br />
<span>0123.456.789</span><br />
<span>0123.456.789</span><br />
<span> contact#xidian.com</span>
</h2>
Find out more
</div>
<!--End-->
</section>
<!--End Section-->
<footer>
<div class="nav-wrapper">
<nav class="footer-nav">
<ul>
<li> Home </li>
<li> Biography </li>
<li> Photo Gallery</li>
<li> Calendar </li>
<li> Videos </li>
<li> Contact me </li>
</ul>
<ul class="second-nav">
<li> Home </li>
<li> Biography </li>
<li> Photo Gallery</li>
<li> Calendar </li>
<li> Videos </li>
<li> Contact me </li>
</ul>
</nav>
<div class="more-info">
<h3>some information here</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipis ellt. Cras non nibh
sed vellt ultrices convallis eget vitae leo. Vestibulum porttitor dolor
sed is semper id consequat urna tristique vivamus sodales, nibh id comisam risti.
</p>
</div>
<div class="follow-me">
<h3>follow me </h3>
<a href="">
<img src="images/youtube.png">
</a>
<a href="">
<img src="images/fb.png">
</a>
<a href="">
<img src="images/twitter.png">
</a>
<a href="">
<img src="images/link.png">
</a>
</div>
<div class="newsletter">
<h3>newsletter</h3>
<p>Lorem ipsum dolor sit amet, consectetur<br />adipiscing ellt. Cras non nibh sed.</p>
<input type="text" name="comment" ><br />
<input type="submit" value="Send" >
</div>
</div>
CSS:
.display-gallery img {
width: 215px ;
height:195px;
margin-right: 30px;
border: 1px solid #D9D9D9;
}
.display-gallery img:hover{
transition-duration: 0.5s ;
transform: scale(1.2);
}
.contact {
float: right;
width: 215px ;
height:195px;
position: relative;
top: -199px;
border: 1px solid #D9D9D9;
}
.contact h2 {
font-size: 16px;
text-transform: uppercase;
line-height: 20px;
padding-left: 12px;
}
.contact p {
text-transform: uppercase;
color: #8e3a17;
font-size: 16px;
padding-top: 20px;
padding-bottom: 18px;
padding-left: 12px;
}
.contact a {
margin-top: 10px;
margin-left: 12px;
}
.nav-wrapper {
outline: solid 1px greenyellow;
overflow: hidden;
border-top: 2px solid #D9D9D9;
border-bottom: 1px solid #D9D9D9;
padding-top: 14px;
padding-bottom: 13px;
}
.footer-nav ul {
float: left;
margin-right: 25px;
}
.footer-nav ul li {
font-size: 10px;
text-transform: uppercase;
line-height: 19px;
}
.second-nav {
margin-right: 25px;
}
.more-info {
border-left: dashed 1px #D9D9D9;
border-right: dashed 1px #D9D9D9;
float: left;
width: 245px;
padding-left: 20px;
padding-right: 20px;
}
.more-info h3 {
font-size: 10px;
text-transform: uppercase;
line-height: 19px;
}
.more-info p {
font-size: 10px;
display: inline-block;
line-height: 13px ;
padding-top: 17px;
width: 210px;
word-break: break-all;
}
.follow-me {
padding: 0 25px 0 25px ;
float: left;
width: 245px;
border-right: 1px dashed #D9D9D9;
}
.follow-me h3 {
text-transform: uppercase;
font-size: 10px;
line-height: 19px;
}
.follow-me img {
padding-top: 17px;
margin-right: 7px;
}
.newsletter {
float: right;
width: 205px;
}
.newsletter h3 {
text-transform: uppercase;
font-size: 10px;
line-height: 19px;
padding-bottom: 7px;
}
.newsletter p {
font-size: 10px;
display: inline-block;
line-height: 13px;
padding-bottom: 6px;
}
input[type= text] {
width: 205px;
height: 20px;
border: 1px solid #D9D9D9;
}
input[type = submit] {
margin-top: 7px;
float: right;
display: inline-block;
background-color: #8e3a17;
font-size: 11px;
color: white;
width: 55px;
height: 20px;
line-height: 15px;
text-align: center;
box-shadow: 1px 1px 2px #8e3a17;
}
Ps:i did apply a css reset
Sorry about the long post

Answer 1

Update the css as follows:
.gallery {
overflow: hidden;
}
.display-gallery {
float: left;
}
.contact {
float: right;
width: 215px ;
height:195px;
/*position: relative;
top: -199px;*/
border: 1px solid #D9D9D9;
}
your first div "display-gallery" catches all the width of the screen. so your "contact" floating right div is added at the bottom of the div block. (remove the "top: -199px" from the second div "contact" and you'll see why when you add clear: both to footer you got this gap).
The margin you get right to the footer is a placeholder of the ".contact" div to which you apply "top: -199px"