Why does the item drop out

Question

Basically I have 3 images and div.contact sitting next to each other contained in the section. div.contact is placed on the right and relatively positioned, but not the image. My problem is that I can’t get "NEWSLETTER" in the footer to take up free space on the right, it continues to fall down.

However, when applying clarity: for the footer, see what happens. It creates a huge space between the footer and the Section.gallery section, but "NEWSLETTER" takes up the whole space

When I test the google chrome check element, there is a large margin that I have not applied.

Corresponding code

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> [e-mail] </span> </h2> <a href="#" class="findout-more ">Find out more</a> </div> <!--End--> </section> <!--End Section--> <footer> <div class="nav-wrapper"> <nav class="footer-nav"> <ul> <li><a href="#"> Home </a></li> <li><a href="#"> Biography </a></li> <li><a href="#"> Photo Gallery</a></li> <li><a href="#"> Calendar </a></li> <li><a href="#"> Videos </a></li> <li><a href="#"> Contact me </a></li> </ul> <ul class="second-nav"> <li><a href="#"> Home </a></li> <li><a href="#"> Biography </a></li> <li><a href="#"> Photo Gallery</a></li> <li><a href="#"> Calendar </a></li> <li><a href="#"> Videos </a></li> <li><a href="#"> Contact me </a></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 applied css reset Sorry for the long post

Answer 1

Update 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 the entire width of the screen. therefore, your “contact” floating right div is added at the bottom of the div block. (remove the "top: -199px" from the second "contact" div, and you will understand why, when you add clarity: as for the footer, you got this space). The limit that you get right on the footer is the placeholder for the ".contact" section to which you apply "top: -199px"