Geek Answers Handbook

The image will not stay inside the div frame

Website: isfnpub.com

Right now I'm using an add-on to get the image, but as you can see, the div thing completely ignores the image.

I work inside Wordpress.

Used code:

<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 frame to naturally flow around all the content, including the image. Without additional 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 a suitable solution, or will I run into a problem later?

+4
source share
3 answers

If I understand correctly, I think you need to. Try using overflow:hidden , which should solve your problem.

+8
source

Try overflow: hide and set the width of the div to say, for example, 300px, then set the width of the images to 100%.

0
source

Both overflow options make it easy to cut off the part of the image outside the div, instead of resizing the image to fit what you really need. I found that using div properties float-none seems like a trick.

-1
source

More articles:


All Articles