how to keep the height of the div equal to the union of the height of elements inside it

Question

I have been making a wordpress template. i got stuck at some place...

the problem is,

how to maintain the size of a div >= the size of p tags and img tags...

i have seen that the div only able to contain the p tag but the img tag over flows...

i have my code in this following order:

<div>
<p> some contents <img src="an_image"/> some morecontent</p>
<div>

what i basically want is:

div height = <p> height U(union) <img> height

but, what actually i am getting is:

div height = <p> height; while <img> over flows

i have already checked for similar questions on Stack Overflow but was not able to find one which solves a similar problem.. please give me some idea..

an update:

this is my code:

<div id="the_content">
    <p><img class="alignright" src="http://i35.tinypic.com/990wtx.png" alt="WordPress Logo" align="right" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, <a href="#">convallis quis</a>, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat.  <a href="http://localhost/wordpress/?p=55#more-55" class="more-link">(more&#8230;)</a></p>
</div>

Answer 1

If you do not specify the height it would wrap around all the elements inside it , why do you want to specify the height?

Answer 2

You don't show your CSS, but it sounds like you have a floated image inside the div. You may want to try a clearing div after the <p>. Or there are other, newer solutions detailed on Quirksmode.