[FIXED] Image won't stay inside div border

Issue

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?

Solution

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

Answered By - Elias Rodrigues