CODEWITHSUNDEEP
htmlcsswordpress
user1989134
user1989134

Reputation: 1

Picture in one column causes text to be pushed down in the column next to it

Not that good at programming, but

The picture causes the text to move down on the adjacent column and I have no idea why this is happening. I've tried floating it and using vertical alignment, neither work. 

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

Thank you for your time

Upvotes: 0

Views: 1736

Answers (2)

Sowmya
Sowmya

Reputation: 26969

There are many tags missing in your code.There is no closing tag of tr and many like this.

Change it to the below method

HTML

<table width="100%" cellpadding="0" cellspacing="0">
    <tbody>
       <tr>
       <td width="50%">     
         <img class="alignnone size-medium wp-image-232" src="" alt="" width="294" height="300" />
       <div class="caption">text</div>
       </td>
       <td class="second_td">text</td>
</tr>
    </tbody>
</table>

CSS

.caption{display:inline-block; font:8pt/12pt verdana;}
.second_td{font:10pt/14pt verdana; vertical-align:top; text-align:right}
img{float:left;border: 1px solid #000000;}

DEMO

Upvotes: 1

SeanCannon
SeanCannon

Reputation: 77976

<td vertical-align:baseline style="border:none" width="20%">

That is not correct syntax. Try:

<td style="border:none; vertical-align:baseline" width="20%">

Also, this: 

style="float:left;border: 1px solid #000000; alt="" width="294" height="300" style="display:block;"

is missing a quote and has style twice. Try:

style="float:left;border: 1px solid #000000; display:block;" alt=""

Upvotes: 2

Related Questions