SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How do I force image inside <div> tag when browser window narrows?

    Hello;

    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.

    PHP Code:

    // 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>
        
        </
    div
    What I need is for the outside div tag to get narrow to the width of the image then become fixed at that point so that it still surrounds the entire image.

    Thanks.
    .

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 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%.

  3. #3
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ralph.m;

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

    Thanks again.
    .


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •