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

Popular posts from this blog

c++ - QTextObjectInterface with Qml TextEdit (QQuickTextEdit) -

javascript - angular ng-required radio button not toggling required off in firefox 33, OK in chrome -

xcode - Swift Playground - Files are not readable -