Image in table not placed as expected?
Multi tool use
I'm trying to put two images side by side in a table and have the following behavior on the first 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.
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.
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.
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.
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
