html - Div background wrong when cascading divs -
i have created simple html/css sample in jsfiddle show problem. want have multiple section among themselves. each section should have width of 100% , content area within section 978 px.
in general html/css seems work, when want add multiple divs within div (content) , align 1 on left (blog) other 1 on right side (sidebar), going wrong background of wrapper (content-wrapper). ave same background content-wrapper , about-wrapper. both gray. content-wrapper background color must green.
my question:
- whats wrong html/css: why have both wrapper same background color if have set different color in css?
- is html/css layout?
html
<div class="page-wrapper"> <div class="header-wrapper"> <div class="header center">header</div> </div> <div class="content-wrapper"> <div class="content center"> <div class="blog"> blog </div> <div class="sidebar"> sidebar </div> </div> </div> <div class="about-wrapper"> <div class="about center">about</div> </div> <div class="footer-wrapper"> <div class="footer center">footer</div> </div> </div> <!-- end page-wrapper -->
css
.page-wrapper { width:100%; background-color: red; } .center { margin: 0 auto; width: 100px; } .blog { float: left; width: 678px; } .sidebar { float: right; width: 300px; } .header-wrapper {background-color:yellow;width:100%;} .content-wrapper {background-color:green;width:100%;} .about-wrapper {background-color:gray;width:100%;} .footer-wrapper {background-color:blue;width:100%;} .header { width: 978px; background-color: red; } .content { width: 978px; background-color:blue; } .about { width: 978px; background-color: yellow; } .footer { width: 978px; background-color: green; }
you have nothing floating children inside .content
block, collapses 0 height. need add .clearfix
fix that:
.page-wrapper { width:100%; background-color: red; } .center { margin: 0 auto; width: 100px; } .blog { float: left; width: 678px; } .sidebar { float: right; width: 300px; } .header-wrapper {background-color:yellow;width:100%;} .content-wrapper {background-color:green;width:100%;} .about-wrapper {background-color:gray;width:100%;} .footer-wrapper {background-color:blue;width:100%;} .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .header { width: 978px; background-color: red; } .content { width: 978px; background-color:blue; } .about { width: 978px; background-color: yellow; } .footer { width: 978px; background-color: green; }
<div class="page-wrapper"> <div class="header-wrapper"> <div class="header center">header</div> </div> <div class="content-wrapper clearfix"> <div class="content center clearfix"> <div class="blog"> blog </div> <div class="sidebar"> sidebar </div> </div> </div> <div class="about-wrapper"> <div class="about center">about</div> </div> <div class="footer-wrapper"> <div class="footer center">footer</div> </div> </div>
is html/css layout?
answer depends on ask - personally, use flexbox.
Comments
Post a Comment