Welcome to WebmasterWorld Guest from 54.167.155.147

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>

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

5+ Year Member



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?

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

Marshall

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

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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]. :-)

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

5+ Year Member



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.