html - Height of a DIV-container -
i've got problem div-containers.
.inner-teaser { width: 100%; max-width: 1000px; margin: 0 auto; padding: 20px; } .bg-blue { background: blue; } .teaser-image { background-position: center; background-size: 350px; width: 250px; height: 250px; border-radius: 150px; } .image-left { float: left; margin-right: 50px; }
<div class="outer-teaser bg-blue"> <div class="inner-teaser"> <div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">image</div> <div class="teaser-text">lorem ipsum dolor...</div> </div> </div>
the inner-teaser
should have height teaser-image
(250px) + 20px padding. inner-teaser
has height of 40px (2 * 20px padding).
add overflow: hidden
.inner-teaser
force take floating-children height:
.inner-teaser { width: 100%; max-width: 1000px; margin: 0 auto; padding: 20px; overflow: hidden; } .bg-blue { background: blue; } .teaser-image { background-position: center; background-size: 350px; width: 250px; height: 250px; border-radius: 150px; } .image-left { float: left; margin-right: 50px; }
<div class="outer-teaser bg-blue"> <div class="inner-teaser"> <div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">image</div> <div class="teaser-text">lorem ipsum dolor...</div> </div> </div>
Comments
Post a Comment