Image won’t stay inside div border

4 Views

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.

Read More

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>

<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>

Click image for full cover spread.

<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?

Post Views: 4

Related posts

Leave a Reply

4 comments

  3. you need set width and height for your img tag in div:

    e.g.

    img style=”width: 100%; height: 100%;” alt=”abc…” src=”https://somesite/your_pic.png”

  4. Both the overflow options suggested just cut off the part of the image that is outside of the div, rather than getting the image to resize to fit within, which is what really needs to happen. I found that using the div properties float-none seems to do the trick.