How do I make this layout? - html

Question

So my current layout is:
<div style="width:900px;height:500px;border:6px double #00c7ff;"><table cellspacing="1" cellpadding="0" border="0"
bgcolor="white" id="shell" height="500" width="900">
<tr height="50">
<td colspan="2" bgcolor="#cab0cb">
<table title="Banner" id="banner" border="0">
<tr><td>Place a banner here</td></tr>
</table>
</td>
</tr>
<tr height="50">
<td bgcolor="#cab0cb">
<table id="navigation" title="Navigation" border="0">
<tr><td><center><b><font face="arial" color="0094bd"><font size="5">Records</font></b></center><br><br><font size="2.5">No records set yet.</font></font></td></tr>
</table>
</td><td bgcolor="#cab0cb">
<table title="Content" id="content" border="0">
<tr><td><font face="arial" color="#0094bd"><b><font size="5"><center>Welcome to Ivory Forest Kennel</center></font></b><br><br><font size="2.5">We are a fairly new kennel on K9, specialising in the great Siberian Husky. Initially, we will be breeding and selling Huskies, bred from simple gamebred dogs. Our huskies currently specialise in Obedience, but we will seek further training later. Soon, we will also be breeding Yorkshire Terriers, also gamebred, so look forward to those!</font></font></td></tr>
</table>
</td>
</tr>
</table>
</div>
And Im trying to make it sort of like these:
http://i18.photobucket.com/albums/b135/silverfox13425/Decorated%20images/Dexterity_zps04ada334.png
http://i18.photobucket.com/albums/b135/silverfox13425/Decorated%20images/Siberians_zpsbe70e931.png
Which I could be going about it all wrong, to be honest, but it's working thus far.. My issue at the moment is my "records" section is too thin. And I cant figure out for the life of me how to make it wider. I have tried editing everything that says "width", and making my own width=x sort of command, but nothing seems to be working. No clue what I'm doing wrong here.

Answer 1

Here is your JsBin code
Well, I was not supposed to give you some suggestions on your layout.
But I must say
Your layout is really complicated.
You should not use too much tables, tables are just used to render some tabular data.
Try to use only <div> tags.
Please use some jsbin or jsfiddle like online tools to show us your problems.
Nesting of tables really creates complexities in your html code thus reduces its readability.
If you feel problems in designing your web page layout then I'll recommend these links to you. Please take a look.
http://www.learnlayout.com
http://www.tizag.com/htmlT/htmldiv.php
http://www.youtube.com/watch?v=68kiDajh1lg
http://gostats.com/resources/css-div-tutorial.html
Your code
<div style="width:90%; margin:auto;height:500px;border:6px double #00c7ff; vertical-align:top;"><table cellspacing="10" cellpadding="10" border="0"
bgcolor="#cab0cb" id="shell" height="500" >
<tr height="50">
<td colspan="2" bgcolor="#cab0cb">
<table title="Banner" id="banner" border="0">
<tr><td>Place a banner here</td></tr>
</table>
</td>
</tr>
<tr height="50">
<td bgcolor="#cab0cb" style="width:20%;">
<table id="navigation" title="Navigation" border="0">
<tr><td><center><b><font face="arial" color="0094bd"><font size="5">Records</font></b></center><br><br><font size="2.5">No records set yet.</font></font></td></tr>
</table>
</td><td bgcolor="#cab0cb">
<table title="Content" id="content" border="0">
<tr><td><font face="arial" color="#0094bd"><b><font size="5"><center>Welcome to Ivory Forest Kennel</center></font></b><br><br><font size="2.5">We are a fairly new kennel on K9, specialising in the great Siberian Husky. Initially, we will be breeding and selling Huskies, bred from simple gamebred dogs. Our huskies currently specialise in Obedience, but we will seek further training later. Soon, we will also be breeding Yorkshire Terriers, also gamebred, so look forward to those!</font></font></td></tr>
</table>
</td>
</tr>
</table>
</div>

Answer 2

Try this and change your Record field size needed.
<td width="20%">
DEMO