Home/ Questions/Q 9125991
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T06:55:59+00:00

I am trying to make a simple page: two centered thumbnails images. Each one

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0