CODEWITHSUNDEEP
htmlcss
yves Baumes
yves Baumes

Reputation: 9036

Why the img tag expand beyond its width?

I am trying to make a simple page: two centered thumbnails images. Each one links to its original image. Here is the code (I've removed some part for clarity):


<!DOCTYPE html>
<html>
  <head>
    <style>
      .column1, .column2 {
      width:50%;
      float:left;
      }

      div img {
      display:block;
      margin:20px auto;
      width:300px;
      }
    </style>
  </head>
  <body>
    <div class="column1">
      <a href="#">
        <img src="maelstrom_mini.jpg" />
      </a>
    </div>
    <div class="column2">
      <a href="#">
        <img src="maelstrom_mini.jpg" />
      </a>
    </div>
  </body>
</html>

The issue is that very subtle: Each image is only 300px wide, but the anchor boxes are wider that the image it is supposed to contain. It makes the image "clickable" above its surface. I can't figure out how to tell the anchor not to spread to all its column.

When I remove the display:block attribute in the style sheet, then it solves that issue, but my pictures are no longer centered in regards to the containing column.

What's the correct solution to have both correct presentation?

Upvotes: 2

Views: 431

Answers (3)

rusty009
rusty009

Reputation: 876

I've fixed your problem,

I've added a wrapping div around the a and img tag setting that width to 300px, then setting the images width to 100% like so,

<!DOCTYPE html>
<html>
  <head>
    <style>
      .column1, .column2 {
      width:49%;
      float:left;
      border: 1px solid red;
      }

      div img {
      width:100%;
      }

      #img-wrap{

      width:300px;
       margin:20px auto;
      display: block;
      }


    </style>
  </head>
  <body>
    <div class="column1">
      <div id="img-wrap">
      <a href="#">
        <img src="" />
      </a>
      </div>
    </div>
    <div class="column2">
      <div id="img-wrap">
      <a href="#">
        <img src="" />
      </a>
        </div>
    </div>
  </body>
</html>

which can be found to work here > http://jsfiddle.net/3se2V/3/

Upvotes: 2

boggsey
boggsey

Reputation: 154

The only time that I can replicate the issue is if I add display:block to all a elements. So, I suggest adding this to your css:

div a {
  display:inline;
}

That might resolve your issue.

Upvotes: 0

Kevin Boucher
Kevin Boucher

Reputation: 16705

I believe the issue is the margin:20px auto; on the img:

Change this:

div img {
    display:block;
    margin:20px auto;
    width:300px;
}

to this:

div { margin: 20px 0; }

div img {
    display:block;
    margin:0 auto;
    width:300px;
}

Upvotes: 0

Related Questions