CODEWITHSUNDEEP
htmlcssimage
th3falc0n
th3falc0n

Reputation: 1427

outer div height not expanding with img inside

I have a structure like this:

HTML

<div class="cat_item">
    <div class="cat_image">
         <img src="/res/imyg/srm450v2.jpg" />
    </div>
    <div class="cat_desc">
        <h2>Mackie - SRM450v2</h2>
        <p>
             Description Text
        </p>
     </div>
</div>

LESS

.cat_item {
  padding:10px;
  border-radius:5px;
  background-color:white;

  box-shadow:2px 2px 5px black;

  color:black;

  .cat_image {
    float:left;

    margin-right:25px;
    padding:5px;

    background-color:red;

    img {
      width:125px;
      height:175px;
    }
  }

  .cat_desc {
    padding:5px;
  }
}

Now I want the cat_item div to be changing height, so it fits the image. However only the text influences the height of cat_item div. What am I doing wrong?

Upvotes: 0

Views: 857

Answers (2)

Dzhuneyt
Dzhuneyt

Reputation: 8701

You need the following just before the last closing </div>.

<div class="clearfix"></div>

And in your CSS:

.clearfix{
    clear: both;
}

Upvotes: 0

yunzen
yunzen

Reputation: 33439

It's the float. Try a clearfix CSS or set overflow: hidden to the outer div.

How to clear CSS floats without extra markup – different techniques explained. There are three major approaches: a) Floating the containing element as well, b) Using overflow: hidden on the container, c) Generating content using the :after CSS pseudo-class.

From: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Upvotes: 2

Related Questions