Why is wrapping image with link changing the layout of the page?

Question

Adding < a href> to images makes the box around the image larger and forces the text on the right hand side of the image further right. I would like to make the image link to another page while keeping the current format.

I tried adding to the image (alt is connector) (shown below), but it didn't work. (https://www.w3schools.com/html/html_images.asp - Image as a Link uses around ).

I would expect adding the to the image would simply make the image link to another page, but it changed the size of the box for the image and pushed the text to the right of the image further right.

Page: https://www.flexsweep.com/pages/aboutourproducts (shows layout as it should be - provides access to inspect if needed.)

/*Image and Advantages*/

.content {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.content img {
  width: 50%;
  margin-right: 70px;
}

.details {
  width: 50%;
}

<div id="PushBrooms" class="tabcontent">

  <p>Intro text.</p>

  <div class="content">
    <img src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" />

    <div class="details">
      <p>
        More text.
        <div><a href="https://www.flexsweep.com/collections/unbreakable-push-brooms" class="buttonLink buttonShop">Shop Push Brooms →</a></div>
      </p>
    </div>
  </div>
  <!-- Attempt to add link to image -->

  <a href="www.flexsweep.com"><img src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" /></a>

What's "alt=connector" supposed to do? What are we supposed to be seeing in the link you posted? — j08691, Jun 07 '19 at 17:33
Why have you tried to fix your problem giving the `` `alt="connector"`? Could you please link any documentation stating it might be the proper solution? — tao, Jun 07 '19 at 17:36
I made you a snippet. Please make it do what you are trying to do — mplungjan, Jun 07 '19 at 17:38
The `alt` attribute was required in HTML4 and [it's still recommended to define it](https://www.joedolson.com/2015/03/are-alt-attributes-required-always/) for those users using a screen reader. I assume that's why the author of the question added it to avoid misbehavior due to incomplete attributes. — SaschaM78, Jun 07 '19 at 17:49
Your snippet does not place an anchor tag around the image, so we can't see whatever it is that you're having trouble with. I'd guess that there is other CSS on the page that is affecting links, or else relative styling that's being affected by the lack of the img tag where it originally was. — Chris B., Jun 07 '19 at 17:54
@RutherfordWonkington I thought that as well but in fact there is a larger version of the image in the bottom part below that is contained in an anchor tag. — SaschaM78, Jun 07 '19 at 17:56
I originally built the page without adding the link to the images (I think that is the anchor tag - I am learning as I go here). I then realized that the images should go to the same link as the buttons, but when I added the link, it changed the layout. Adding links to text in the intro text paragraph and shop button worked just fine. — tomriddle22, Jun 07 '19 at 18:07

score 3 · Answer 1 · answered Jun 07 '19 at 18:15

IMG tags behave special as they are a mixture of "block" (have height and width) and "inline" (float around text) elements. Here's some good information about this topic if you want to learn more about it.

Images in <a> tags have an extra bit of padding at the footer which you can get rid of by applying display:block; to the element. Also make sure that there is no extra margin or padding applied by some other rules:

a img {
  padding: 0;
  margin: 0;
  display: block;
}

Here's a demo with some colored backgrounds to show you which element applies padding or margin.

Chris B. · Accepted Answer · 2019-06-07T18:43:24.580

1

The original image is sized at 50% width from the CSS rule on .content img. This only affects img tags that are descendants of elements with the content class. If you apply content to the link, it will work as you expect.

Edit: Noticed this will not work if you place it inside all inside another content container because the relative width is calculated from the parent, which in the second case will be the a element and not the content div. I updated the snippet to size descendant links of content to be sized at 50% width and the contained images to be 100%.

To address the small amount of padding at the bottom of the link, you can use the solution provided in Sascha's answer

/*Image and Advantages*/

.content {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.content img {
  width: 50%;
}

.link-wrap {
  width: 50%;
}

.link-wrap img {
  width: 100%;
}



.details {
  width: 50%;
}

<div id="PushBrooms" class="tabcontent">

  <p>Intro text.</p>

  <div class="content">
    <img  src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" />

    <div class="details">
      <p>
        More text. </p>
        <div><a href="https://www.flexsweep.com/collections/unbreakable-push-brooms" class="buttonLink buttonShop">Shop Push Brooms →</a></div>
     
    </div>
  </div>
  <!-- Attempt to add link to image -->


  
    <div class="content">
      <a class="link-wrap" href="www.flexsweep.com"><img  src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" /></a>

    <div class="details">
      <p>
        More text.</p>
        <div><a href="https://www.flexsweep.com/collections/unbreakable-push-brooms" class="buttonLink buttonShop">Shop Push Brooms →</a></div>
      
    </div>
  </div>

edited Jun 07 '19 at 18:43

answered Jun 07 '19 at 18:11

Chris B.

5,477
1
12
30

I tried adding the class="content", but it pushed the text below the image. – tomriddle22 Jun 07 '19 at 18:15
1

Your answer plays with the same invalid HTML the OP uses. – Rob Jun 07 '19 at 18:22
You mean the div in the p tag in the details section? Honestly I didn't take a close look at that, but the image/link tags should be OK unless I missed something. – Chris B. Jun 07 '19 at 18:27
I don't know. I would never work with, or answer questions of, any markup or code that contains fundamental errors. – Rob Jun 07 '19 at 18:30
Something about this made my code unhappy (all of a sudden all red when normally black) and hid the image. My guess is that there is something small somewhere that is preventing this from acting as expected since there is no obvious solution. – tomriddle22 Jun 07 '19 at 18:31
You can't place a div inside of a paragraph tag as it will break the text flow. To address it you just have to move the closing p tag back to the end of the text. I fixed it in my snippet. – Chris B. Jun 07 '19 at 18:38
It worked! Thanks! The padding was a bit off, but I can work on that. – tomriddle22 Jun 07 '19 at 18:39
I switched the div and p and it didn't affect the layout or this solution. I will fix the rest of them though to make the code better. – tomriddle22 Jun 07 '19 at 18:40
To address the small amount of padding at the bottom of the link, you can use the solution provided in [Sascha's](https://stackoverflow.com/users/1178759/sascham78) answer. – Chris B. Jun 07 '19 at 18:41

Why is wrapping image with link changing the layout of the page?

2 Answers2