Image won't stay inside div border

Question

Website: isfnpub.com

Right now I'm using extra padding to get the image to fit, but as you see, the div thing is completely ignoring the image.

I'm working inside Wordpress.

Code used:

<div style="border: 5px solid #FFC85D; padding: 10px; margin:30px;">

<p><strong>UPCOMING RELEASE: ISFN ANTHOLOGY #1</strong></p>

<p>[caption id="attachment_801" align="alignright" 
width="189" 
caption="Click image for full cover spread."]
<a href="http://ISFNpub.com/wp-content/uploads/2010/07/cover-small-full.jpg" 
target="_blank">
<img src="http://ISFNpub.com/wp-content/uploads/2010/07/cover-small-189x300.jpg" 
alt="" 
title="Anthology 1 front" 
width="189" height="300" 
class="size-medium wp-image-801" /></a>
[/caption]
<strong>Authors: </strong> blah blah blah.</p>

<p><strong>Cover Art By:</strong> Xenia Latii</p>

<p>blah blah blah</p>

</div>

I want the div border to naturally wrap around all of the content, including the image. Without the extra padding the image overlaps the border and everything looks uglo.

Thanks.

EDIT: I used <div style="overflow:auto; ..."> and it seems to work. Is this an appropriate solution, or will I run into trouble later on?

Answer 1

If I understand correctly then I think that's what you need. Try to use overflow:hidden that should be solve your problem.

Answer 2

Try overflow: hidden and set the width of the div to say for example 300px then set the pictures width to 100%.