CODEWITHSUNDEEP
htmlcss
MarksCode
MarksCode

Reputation: 8584

Image in table not placed as expected?

I'm trying to put two images side by side in a table and have the following behavior on the first image:

  1. Have it be right up against the bottom of the table, so the bottom border is overlapping with the bottom border of the table.
  2. Have no right margin or padding, so it is right against the second image (so the right border of the first image is overlapping with the left border of the second image).

To solve the first thing I'm using valign="bottom" but that doesn't seem to fully work.

To solve the second issue I'm using padding-right:0px; margin-right:0px; but that doesn't work either.

Can anyone help me achieve the behavior I'm going for please? Note that I'm using a table because I have other things in this table, I just took them out to simplify the question.

table {
  border: 1px solid black;
}

.benderImg {
  border: 2px solid green;
  padding-right: 0px;
  margin-right: 0px;
}

.benderImg > img {
  border: 1px solid red;
}
<table width="666" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="benderImg" valign="bottom">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V"></img>
    <td>
    <td valign="bottom">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg"></img>
    <td>
  </tr>
</table>

Upvotes: 1

Views: 50

Answers (3)

MarksCode
MarksCode

Reputation: 8584

For the second issue, I fixed it by just using align="right" on the first image's td. The first issue was fixed with a vertical-align: bottom on the first image.

Upvotes: 0

Andrzej Zi&#243;łek
Andrzej Zi&#243;łek

Reputation: 2319

Below you can see two tricks that should work for you. In first I've made td to be display: flex with two alignments. ;). In second I used inside div element with flex, so to not change default display: table-cell for td element. I've also fixed typos in tags you used.

table {
  border: 1px solid black;
}

.benderImg {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  border: 2px solid green;
  padding-right: 0px;
  margin-right: 0px;
}

.benderImg>img {
  border: 1px solid red;
}
<table width="666" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="benderImg">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V" />
    </td>
    <td>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg" />
    </td>
  </tr>
</table>

table {
  border: 1px solid black;
}

.benderImg {
  border: 2px solid green;
  padding-right: 0px;
  margin-right: 0px;
}

.benderImg>div>img {
  border: 1px solid red;
}

.benderImg > div {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 100%;
  width: 100%;
}
<table width="666" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="benderImg">
    <div>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V" />
    </div>
      <td>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg" />
      </td>
  </tr>
</table>

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46569

First, you are using obsolete attributes, which is not recommended. Besides, some of the attributes try to set different values than the properties in the CSS, which is a no-no. Replace them all with CSS properties.

Secondly, the vertical align property should be on the img rather than on the td.

Then the distance between the two images; the second image has no border or margin, and neither does its td, so I'm not sure why you think there should be some spacing in between. I put a left padding on the td; you can change that to fit your needs.

And finally, </img> is unnecessary; not allowed even, since <img> is a void element. You can end the <img> tag with a slash if you want.

table {
  border: 1px solid black;
  width: 666px;     /* css replacement for width attr */
  border-spacing:0; /* css replacement for cellspacing attr */
}

td {
  padding:0;        /* css replacement for cellpadding attr */
}

.benderImg {
  border: 2px solid green;
  padding-right: 0px;
  margin-right: 0px;
}

.benderImg > img {
  border: 1px solid red;
  vertical-align:bottom;
}

.benderImg + td {
  padding-left:5px;
}
<table>
  <tr>
    <td class="benderImg">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V" alt="" />
    <td>
    <td>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg" alt="">
    <td>
  </tr>
</table>

Upvotes: 0

Related Questions