Results 1 to 3 of 3
Apr 11, 2011, 06:42 #1
How do I force image inside <div> tag when browser window narrows?
Can someone tell me how to keep/force the image below inside the outside <div> tag?
The image below fits inside the 50% width outside <div> tag when the browser is wide enough.
However, when I make the browser window narrow the outside <div> tag gets narrow - but the image stays the same width. It juts outside of the right border of the outside <div> tag.
The image is 350px wide. I have tried using width: 400px and min-width: 400px for the inside <div> tag. Setting the width for the inside <div> tag at 400px works in the FireFox browser. But that methodology won't work with the Internet Explorer browser.
// outside div tag.
<div style="width: 50%; border: 2px solid">
// this image juts outside when browser is made narrow
<div><img src="sample.png" /></div>
Apr 11, 2011, 07:10 #2
- Join Date
- Mar 2009
- Melbourne, AU
- 460 Post(s)
- 8 Thread(s)
Have you tried min-width: 400px on the outer div? That's what I would do.
Or you could set to image to max-width: 100%.
Apr 11, 2011, 17:12 #3
Thanks for responding to my question. The min-width: 400px works!
(Note: I made a mistake in my earlier post. The first code - surprisingly - worked good with the IE browser but did not work with the FireFox browser.)