Home/ Questions/Q 6585479
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T16:40:08+00:00

I have a really simple page, with a div. Inside that div is an

  • 0

I have a really simple page, with a div. Inside that div is an image that sits at the top of the div some text that sits below the image.

My Problem: The image is supposed to have a width equal to the divs width, ie, the image is supposed to stretch to the width of the div. But what happens is that the image stretches only about 80% of the width of the div, so theres a gap on the right side of the image.

How can I make the image stretch all the way to the right so its width is the same as the divs width? I think you can see my problem in JSFiddle(complete with uploaded images): http://jsfiddle.net/ajEmm/ but I also encourage you to show the HTML in IE, the image is a link so it will show.

NOTE: This problem only occurs in IE, in firefox the image correctly stretches to the width of the div

<html>
<head>
    <style type="text/css">
    <!--
        body        { background-color: RGB(218,238,248); }

        .content      { padding-top: 2%; margin: 10px; margin-top: 0; width: 58%;
                        max-width: 58%; float: left; color: #454545; }

        #announcement { margin: 5%; margin-top: 0%; margin-bottom: 5%; border-color: #99CCFF;
                        border-width:thin; border-style:solid; border-right-width:thick;
                        border-top-width:0px; border-bottom-width:thick; background-color: #FFFFFF; }
    -->
    </style>
</head>
<body>

    <div class="content">
        <div id="announcement">
            <img class="anncHeading" src="http://i54.tinypic.com/qs1lsg.png" width="100%" height="60%" alt="1"/>
            <p><b>Announcements</b></p>
            <p>Planning on hosting an indoor/outdoor event? We have large, modern educational facilities & surounding gardens available for hire & lease at an economical rate.</p>
        </div>
    </div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Woah, woah woah.

    • PLEASE write it in a structured, easy-to-digest format. It will help you out in the long run as you learn code (whether it’s css, php, js, etc…)

    • Your code is formatted poorly. I updated your fiddle: http://jsfiddle.net/ajEmm/3/ (plugged everything in the HTML box so you can just copy and paste it into your page file)

    • Because some users have massive screen resolutions, width: 58%; could be incredibly large. Using a percentage-based width like that is good practice, but usually reserved for site containers and core elements. When using images in fluid layouts, special precautions must be taken (to avoid warping, etc). In your specific case, the image you have IS NOT IDEAL for the code you have. I would suggest one of two things:

      1. Set the container width at 450px, which is the width of your image; or,
      2. Rewrite the way your page works, and use a really long header image without text. If you would like to do this, I’m available to help you. Let me know and I’ll make a fiddle and write instructions for ya. 🙂
    • 0