CODEWITHSUNDEEP
htmlcss
user1989134
user1989134

Reputation: 1

HTML: Table with image on right, text on left, and text gets pushed down for some reason

I'm almost a complete beginner, please keep this in mind

<table style="border:none" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="border:none" valign="top" vertical-align:"top"; width="20%">
        <div><img class="alignnone size-medium wp-image-232" src="" style="border: 1px solid #000000; alt="" width="294" height="300"></div>
        <div class="caption" style="font:8pt/12pt verdana" align="center">text</div>
      </td>
      <td style="border:none" valign="top" vertical-align:middle;>
        <div style="font:10pt/14pt verdana" align="justify" valign="top">text text text</div>
      </td>
  </tbody>
</table>

for some reason the text on the right column is pushed down by the image on the left. I find that I can correct this by adding &nbsp before the image, but the image gets pushed down and looks ugly.

Questions: How do I vertically align the image and the text?

Why does the cell padding and cell spacing do nothing?

Upvotes: 0

Views: 7409

Answers (2)

Sk&#228;ggiga Mannen
Sk&#228;ggiga Mannen

Reputation: 1043

You just have some typos. Your html is a little messed up. vertical-align is a css property, and therefore should be inside the style="" declaration like below. you're also missing some closing tags.

<table style="border:none;" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="border:none; vertical-align:"top";" valign="top" width="20%">
          <div><img class="alignnone size-medium wp-image-232" src="" style="border: 1px solid #000000; display: block;" alt="" width="294" height="300" /></div>
        <div class="caption" style="font:8pt/12pt verdana" align="center">text</div>
      </td>
      <td style="border:none; vertical-align:middle;" valign="top">
        <div style="font:10pt/14pt verdana;" align="justify" valign="top">text text text</div>
      </td>
    </tr>
  </tbody>
</table>

here's a fiddle: http://jsfiddle.net/s_Oaten/vmaex/

Upvotes: 0

Charles
Charles

Reputation: 4538

Cellpadding and cellspacing are by default 0. That's why they "do nothing." To vertically align, use the CSS vertical-align. Something like 

<td style="vertical-align:top;">

may be what you're looking for.

Upvotes: 1

Related Questions