Search code examples
csshtmlheightparent

Parent div expand with children Div

I need to keep the height of the box the same as the height of the image. When the kitten (example) image is 398px height, the div shall have the same height.
The Problem is, that the other children div, inside the .item div expand the parent div with approx. 150px.

How can I stop this behaviour?
I tried several other methids like overflow:hidden/auto etc. but nothing worked fine.
Need help please! :)

HTML:

<div id="container">
    <div class="item">
        <img src="http://placekitten.com/g/398/398" />
        <div class="box">
            <span id="header-content">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr
            </span>
        </div>
        <div class="headlineblog"><h1>Headline</h1></div>
        <div class="cat"><h2>Category</h2></div>
    </div>
</div>​

CSS:

#container {}
.item {width: 398px;float:left;margin: 10px;overflow: hidden !important;}
.item > img {width: 398px !important}
.item .box {background-color: white;
margin: 10px;
height: 65px;
position: relative;
top: -110px;
font-size: 14px;
color: #BBBDBE;
min-height: 65px;
padding: 10px;
width: 358px;

}
.cat {position: relative;left: 280px;bottom: 230px;}
.cat h2 a{font-size: 14px;text-transform: uppercase;font-weight: 300;color: #FF6400}
.headlineblog {position: relative;left: 20px;bottom: 195px;}
.headlineblog h1 a{font-size: 18px; color: black; font-weight: 700}
.item .box #header-content { position: absolute; bottom: 10px;font-size: 14px;font-weight: 300;color: grey;width: 310px;text-overflow: ellipsis;overflow: hidden;-o-text-overflow: ellipsis;white-space: nowrap; }​

Live DEMO

Solution

  • You can set .item to have position: relative, and the necessary children to have position: absolute, adjusting their top/bottom positioning a bit.