Little CSS problem with Auto height and nested div's
- by GeekDrop.com
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 if 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: Example Screenshot
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. Example Screenshot
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?
