CODEWITHSUNDEEP
javascripthtmlcss
user593747
user593747

Reputation: 1524

Image doesn't grow in width to equal parent div's width

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>

Upvotes: 0

Views: 331

Answers (1)

user926352
user926352

Reputation:

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

Upvotes: 3

Related Questions