Tell me, there is a div ( footer-top ), it is 0 in height, although there are many other divs and other content in it.
Shouldn’t it have to become that height, what is the height of its content?
.footer-top { padding-top: 70px; height: 270px; } .logo-footer, .our-studio, .stay-in-touch { float: left; margin-right: 30px; width: calc(33% - 30px); height: 200px; } .logo-footer-img { height: 50px; width: 128px; background-image: url(../img/logo-footer.png); margin-bottom: 30px; } .logo-footer p { color: white; font-family: 'Roboto'; font-size: 14px; font-weight: 300; line-height: 26px; } .our-studio h6 { color: white; font-family: 'Roboto'; font-size: 15px; font-weight: 900; line-height: 26px; margin-top: 17px; } .our-studio p { color: white; font-family: 'Roboto'; font-size: 14px; font-weight: 300; line-height: 26px; position: relative; padding-left: 30px; } .our-studio p:before { content: ''; position: absolute; top: 1px; left: 0; background-image: url(../img/our-studio-bg.png); width: 14px; height: 19px; } .footer-phone { color: white; font-family: 'Roboto'; font-size: 14px; font-weight: 300; line-height: 26px; position: relative; padding-left: 30px; } p.footer-phone:before { content: ''; position: absolute; top: 1px; left: 0; background-image: url(../img/footer-phone.png); width: 17px; height: 17px; } .stay-in-touch h6 { color: white; font-family: 'Roboto'; font-size: 15px; font-weight: 900; line-height: 26px; margin-top: 17px; } .stay-input { background: none; width: 201px; height: 45px; opacity: 0.75; color: white; font-family: 'Roboto', sans-serif; font-size: 14px; margin-right: 10px; } .stay-button { height: 45px; width: 70px; padding: 0; border: none; margin: 0; opacity: 0.5; } .stay-input, .stay-button { float: left; } .stay-input::-moz-placeholder { opacity: 0.75; color: white; font-family: 'Roboto', sans-serif; } .stay-input::-webkit-input-placeholder { opacity: 0.75; color: white; font-family: 'Roboto', sans-serif; } .stay-in-touch form { height: 45px; } .links { height: 35px; width: 260px; margin-top: 26px; } .links-ul { height: 35px; width: 260px; margin: 0; padding: 0; } .links-item { list-style: none; display: inline-block; float: left; height: 35px; width: 35px; margin-right: 7px; } .link-a { height: 35px; width: 35px; display: block; } .li1 { background-image: url(../img/li1.png); } .li2 { background-image: url(../img/li2.png); } .li3 { background-image: url(../img/li3.png); } .li4 { background-image: url(../img/li4.png); } .li5 { background-image: url(../img/li5.png); } .li6 { background-image: url(../img/li6.png); } <div class="footer-top"> <div class="logo-footer"> <div class="logo-footer-img"></div> <p>lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh elit. Duis sed odio sit amet auctror a ornare odio non mauris vitae erat in elit</p> </div> <div class="our-studio"> <h6>OUR STUDIO</h6> <p>Ruko cucruk, Jl. Radio luar dalem jos No.12 - 13, Kalideres - Jakarta Barat 11480 - Indonesia</p> <p class="footer-phone">(+62) 21-2224 3333</p> </div> <div class="stay-in-touch"> <h6>STAY IN TOUCH</h6> <form> <input type="email" name="email-newsletter" placeholder="Subscribe our newsletter" class="stay-input"> <input type="image" src="img/newsletter-button.png" name="imagebutton" class="stay-button"> </form> <div class="links"> <ul class="links-ul"> <li class="links-item li1"><a href="#" class="link-a"></a></li> <li class="links-item li2"><a href="#" class="link-a"></a></li> <li class="links-item li3"><a href="#" class="link-a"></a></li> <li class="links-item li4"><a href="#" class="link-a"></a></li> <li class="links-item li5"><a href="#" class="link-a"></a></li> <li class="links-item li6"><a href="#" class="link-a"></a></li> </ul> </div> </div> </div> 
