Welcome to WebmasterWorld Guest from 54.221.9.209

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)

New User

5+ Year Member

joined:Aug 28, 2007
posts:6
votes: 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?

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Aug 29, 2003
posts:944
votes: 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;}

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

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts: 2143
votes: 7


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)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 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]. :-)

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

New User

5+ Year Member

joined:Aug 28, 2007
posts:6
votes: 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.