html - divs inside div not working properly -
this question has answer here:
- css container div not getting height 5 answers
<div id="footer"> <div> <h2>revovation</h2> <p>our mission provide best handyman service @ reasonable price without sacrificing quality. satisfy our work knowing take necessary steps meet needs , job done right </p> </div> <div> <h2>information</h2> <div> <ul> <li>blog</li> <li>services</li> <li>extras</li> <li>contact</li> </ul> </div> <div> <ul> <li>projects</li> <li>information</li> <li>about us</li> <li>shop</li> </ul> </div> </div> <div> <h2>renovation office</h2> <ul> <li><img src="images/marker.png" alt="">address</li> <li>phone</li> <li>email</li> <li>fax</li> <li>timings</li> </ul> </div> </div> edit: adding css
#footer { background : #282828; border: 2px solid blue; font-family : verdana; position: relative; color : #8e9a8c; } #footer div { background : #282828; !important; width : 28%; border: 1px solid red; float : left; padding: 60px 0px 30px 40px; } blue border footer div , red border divs inside it. floating inside divs left. why wont outer div cover 3 inner child divs? have no clue whats going wrong in here!
this looks prime case of floating children of element collapsing parent's height: https://css-tricks.com/snippets/css/clear-fix/
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* ie6 */ *:first-child+html .clearfix { zoom: 1; } /* ie7 */ simply add class clearfix element who's height has collapsed, in case:
<div id="footer" class="clearfix"> 
Comments
Post a Comment