Stop one td element from effecting height of sibling td element

Question

I have a tr element with 3 td elements. The first and last td contain an image and the middle td contains text. The height of the middle td is effected by the height of the images in the first and third td. How do I code it so the middle td always has a fixed height smaller than the first and third. Or, another way of asking the question is, how do code it so the height of each td's contents does not effect a sibling td? I'm trying to make a ribbon with a wrap around effect for an html email..

Setting a height on the middle td with CSS did not work.

 <table align="center" style="width:740px;" border="0" cellpadding="0" cellspacing="0">

    <tr>
          <td>
          <img style="border:none;" src="imageAlt2/sliceLeft.png" /></td>


      <td style=" background:#0082c8; color:#fff; padding:20px 50px;">"The amount of time it has saved us is pretty much immeasurable" </td>

            <td><img style="border:none;" src="imageAlt2/sliceRight.png" /></td>
    </tr>
  </table>

For the screen below you see the middle and third td. The middle td's height is effected by the height of the image in the third td. Obviously, to get the 3D effect, the middle td needs to have a shorter height.

enter image description here

You're using a table for layout, aren't you? That way lies madness. And, probably, quite a lot of (valid) criticism. Unless your content is tabular data, (***please***) don't use a `table`. — David Thomas, Sep 07 '12 at 17:34
This is for a HTML email, so I pretty much have to. I specified that in my question. — Mark Bubel, Sep 07 '12 at 17:35

score 1 · Accepted Answer · answered Sep 07 '12 at 17:37

1

Using CSS to specify a height on the td's only works if the height is larger then the height of the img (in other words, the td's cannot be smaller then the img). this is just the way tables work.

answered Sep 07 '12 at 17:37

Kaushal

471
3
15

score 0 · Answer 2 · edited May 23 '17 at 10:32

0

Have you tried the CSS overflow (or overflow-y) property?

overflow: hidden;
height: 50px;

Looks like you may also need table-layout: fixed.

edited May 23 '17 at 10:32

Community

1
1

answered Sep 07 '12 at 17:38

ron rothman

17,348
7
41
43

Stop one td element from effecting height of sibling td element

2 Answers2