How can I make my image not go outside the margins?

Forum Moderators: not2easy

Message Too Old, No Replies

How can I make my image not go outside the margins?

The image is going outside the margins of the <div>

bazooka

1:57 pm on Aug 28, 2007 (gmt 0)

Here is a complete web page (minus image file):

<html><head>
<style type="text/css">
div.answer { width:40%; }
div.question { border-style: solid; }
img.trafficlight { float: right; border-style:solid; display: block; }
</style>
</head><body>
<div class="question">
<img class="trafficlight" src="trafficlightredlit.png">
bar
<div class="answer" >foo</div>
</div></body></html>

The image sticks out of the bottom of the <div class="question"> box.

I have tried using "display: block" as shown, but it did not work.

What can I do to stop the image going outside the box?

abbeyvet

2:07 pm on Aug 28, 2007 (gmt 0)

Try giving your question div a width.

You can also play with overflow, something like this should fix it:

div.question {width:100%; border-style: solid; overflow:auto;}

Marshall

5:15 pm on Aug 28, 2007 (gmt 0)

Try putting a <br style="clear:both" /> either after the image or after <div class="answer" >foo</div>

Marshall

rocknbil

9:25 pm on Aug 28, 2007 (gmt 0)

If there are no floated items in the document preceding the parent div, use a clear as above. But if there *are* floated items in the document preceding the div, it will clear all the way to the bottom of them, forcing "this div" below them all.

Simplest first is play with overflow on the parent div as suggested - but if this is in a complex layout, you can contain the floated image by floating the parent div because floated elements will always clear to all their children.

Recent nightmare with containing elements [webmasterworld.com]. :-)

bazooka

12:30 pm on Aug 29, 2007 (gmt 0)

Thanks to abbeyvet, Marshall, and rocknbil. I used

overflow: auto;

which has fixed the problem as far as I can tell.

Thanks again for the ideas.