CODEWITHSUNDEEP
htmlcss
alexP
alexP

Reputation: 3765

Height of a DIV-container

I've got a problem with 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 the height from the teaser-image (250px) + 20px padding. But inner-teaser has only a height of 40px (2 * 20px padding).

Upvotes: 0

Views: 67

Answers (3)

vrajesh
vrajesh

Reputation: 2942

just add after class class="teaser-text" see demo :demo

.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 style="clear:both"></div>
    </div>
</div>

v style="clear:both">

Upvotes: 0

Thiyagesh
Thiyagesh

Reputation: 411

You can also use { display: inline-block } for .inner-teaser div.

.inner-teaser {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    display: inline-block;
}
.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>

Upvotes: 0

zessx
zessx

Reputation: 68790

Add overflow: hidden to .inner-teaser to force it to take its 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>

Upvotes: 3

Related Questions