html5 - Why does the element drop down -
basically have 3 images , div.contact sitting next each other contained in section.gallery. div.contact has been floated right , relatively positioned not images . problem cant 'newsletter' in footer occupy available space on right, keeps dropping down. 
however when apply clear:both footer see happens.it creates huge space between footer , section.gallery ,but 'newsletter' takes space 
when check google chrome inspect element, there big margin 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> <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 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 { 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 css reset sorry long post
update css 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 width of screen. "contact" floating right div added @ bottom of div block. (remove "top: -199px" second div "contact" , you'll see why when add clear: both footer got gap). margin right footer placeholder of ".contact" div apply "top: -199px"
Comments
Post a Comment