RichInStyle.com tests: clear

The second 'This text' on the left and the first on the right should be aligned (due to the following code:

<table cellspacing=0 cellpadding=0>
<tr>
<td valign=top width=200>
<p style="text-align: right; font-size: 22px; padding-top: 0; line-height: 22px">
<img src="green.gif" vspace=0 width="200" height="52" class="left">
<br clear="left">
<span style="background: green">This text</span>
<br>
<span style="background: blue">This text</span>
</p>
</td>
<td valign=top>
<p style="font-size: 22px; padding-top: 88px; line-height: 22px">
<span style="background: yellow">This text</span><br>
<span style="background: red">This text</span>
</td>
</tr>
</table>

The reason is that clear=left on BR should create three empty line boxes (height 3 * 22=66 pixels), which means that the top padding of 88 pixels on the right should align with that.

The top of the red and top of the yellow should be parallel.

Here's the code:

<table cellspacing=0 cellpadding=0>
<tr>
<td valign=top width=200>
<p style="text-align: right; font-size: 22px; padding-top: 0; line-height: 22px">
<img src="green.gif" vspace=0 width="200" height="52" class="left">
<br clear="left">
<span style="background: green">This text</span><br> <span style="background: yellow">This <br clear=left>text</span> </p>
</td>
<td valign=top>
<p style="font-size: 22px; padding-top: 88px; line-height: 22px">
<span style="background: yellow">This text</span><br>
<span style="background: red">This text</span>
</td>
</tr>
</table>

Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.