html - CSS background is less than div hight -
help me please, can't understand result of code:
<div id="wrapper-top"> <div class="wrapper"> <div id="logo">logo</div> <div id="menu">menu</div> <div id="content"> <div class="block-1-1">text</div> <div class="block-3-1">text</div> <div class="block-3-2">text</div> <div class="block-3-3">text</div> </div> </div> </div>
and css file:
#wrapper-top { width: 100%; background-color: gray; } .wrapper { margin: 0 150px 0 150px; } #logo { width: 100%; height: 50px; } #menu { width: 100%; height: 50px; background-color: navajowhite; } #content { width: 100%; background-color: white; } .block-1-1 { width: 100%; text-align:center; background-color: pink; } .block-3-1 { float:left; width:33%; text-align:center; background-color: violet; } .block-3-2 { float:left; width:34%; text-align:center; background-color: blueviolet; } .block-3-3 { float:left; width:33%; text-align:center; background-color: yellowgreen; }
why divs .block-3-1, .block-3-2 , .block-3-3 seem outside of div .wrapper.
i don't expected because want blocks inside .wrapper.
you need contain floated items in #content
div
one method (there others detailed here) use overflow:hidden
#content { width: 100%; background-color: white; overflow: hidden; }
Comments
Post a Comment