I have these two tables side by side on the page, successfully.
However, the line of text below these two tables doesn't begin from the left side of the page, it begins from the just below the bottom of table 2.
Can you help me fix this so the line of text below these tables begins from the left side of the page?
Thanks.

  .tab1 {  
  width:430px; 
  height:330px;
  float: left; 
  text-align:left;
  margin:0 20px 60px 0;
  font-size: 12px;
  padding: 50em;
  border-collapse:collapse;
  border: 1px solid #153e7e;
  }
  .tab1 td { 
  border: 1px solid #666;
  padding: 25px 25px 25px 25px;
}
  .tab2 {  
  width:430px;
  height:330px;
  float: left;
  text-align:left;
  margin:0 80px 60px 0;
  font-size: 12px;
  padding: 50em;
  border-collapse:collapse;
  border: 1px solid #E55B3C;
  }
  .tab2 td { 
  border: 1px solid #666;
  padding: 25px 25px 25px 25px;
}

<table id="tab1">
<tbody>
<tr><td>
WORDS</td></tr>
</tbody>
</table>
<table id="tab2">
<tbody>
<tr><td>
WORDS
</td></tr>
</tbody>
</table>

The line of text below these tables is:

font size="3" color="#000000" face="Arial">Here are some
examples:</font><br/><br/>

Your example is invalid.
You've assigned ID for tables, but declared CLASSES in CSS.

Any way the answer for you is to use

<div style="clear:both">Your text!!</div>

right after the tables.

Yeah looks like you forgot to clear. Read the sticky:

http://www.webmaster-talk.com/css-fo...you-clear.html