Hi, I'm seeing an unexpected issue where an image inside a div is not contained by the div, if the browser window is smaller than the image width. There are no floats.
What I expect is for the div to contain the image, so the div is stretched out to the width of the image plus the div padding. Tiny test case here, with inline CSS: http://nyh.name/x.html The source of that page is also at the end of this mail. I see the issue in Firefox 3 and Safari 3 on OS X. Have not looked in other browsers yet. I've noticed that if I add position:absolute or float:left to the div, the image will be contained in Firefox but not Safari, and the div will then be flush against the right side of the window instead of respecting the body padding. I don't want the image to be scaled down in size, so workarounds like using max-width:100% on the img don't cut it. This is for a "show full-size image" type page. Source for the page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> <head> <title>Test</title> <style type="text/css"> body { margin: 0; padding: 30px; background: pink; } div { margin: 0; padding: 10px; background: #FFF; border: 1px solid #000; } </style> </head> <body> <div> <img src="http://www.athar.pk/wp-content/uploads/2008/06/widescreen-wallpaper.jpg"; alt="" /> </div> </body> </html> ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
![http://www.athar.pk/wp-content/uploads/2008/06/widescreen-wallpaper.jpg"](http://www.athar.pk/wp-content/uploads/2008/06/widescreen-wallpaper.jpg"){kind=link}