homepage Welcome to WebmasterWorld Guest from 54.205.254.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How can I make my image not go outside the margins?
The image is going outside the margins of the <div>
bazooka




msg:3434340
 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




msg:3434360
 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




msg:3434556
 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




msg:3434830
 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




msg:3435387
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved