Question

So I’m finally learning my way around CSS more and have run into a small problem. I have a container div, with a few divs inside of it, one of them is a bit of text (which can be a random height) and an image that will have a MAX height of 200px.

I am using a dotted/colored background behind them that needs to auto expand to the height of whichever is the tallest, either the text or the image. Right now when I use height:auto on the container div it works perfect for the random height text.

But it’s only adjusting according to the text’s height; if the image is taller than the text, the image overflows the bottom of the background dotted/colored box.

The CSS I’m using currently is this:

h1 div#like_detailed {
  margin: 0;
  font-size: 1.1em;
  width: 700px;
}

#details-image img {
  border: none;
  clear: left;
  float: right;
  margin: -45px 0 0 0;
  max-height: 200px;
  padding: 0 7px 0 10px;
}

#deets-container {
  background-color: #FEF;
  border: #190AE7 1px dotted;
  height: auto;
  margin-top: 0;
  margin-bottom: 30px;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 0;
}

And the HTML for it is this:

<div id="deets-container" class="rounded">
<!-- Button -->
<div class="likebtnframe">(some code)</div>
<!-- Button -->
<div class="tweetbtnframe">(some code)</div>
<!-- Button -->
<ul id="share">
<li><a name="share">(some code)</a></li>
</ul>
<!-- Submitted By -->
<div class="submitter_detailed"><span class="submitter-color smalltext">(some code)</span> (some code)</div>
<!-- Image -->
<div id="**details-image**">(some code)</div>
<!-- Like / Quote -->
<h1 id="**like_detailed**">(some code)</h1>
</div>

I have a feeling this is pretty easy but I’m running out of time to sort it out on my own.

Anyone?

Answer 1

Problem is you haven’t cleared your div which contains your floated image. The best solution to this is to use clearfix.

Add the following to your stylesheet:

.clearfix:before, .clearfix:after {  content: "\0020"; display: block; height: 0; visibility: hidden;    } 
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Anything that contains floated elements always needs to be cleared unless of course you set a fixed height for that element.

Now change your html from this:

<div id="deets-container" class="rounded">

to this:

<div id="deets-container" class="rounded clearfix">

I hope I helped.