How to: Fix up Blogger Template To Utilize The Full Screen

Intro

Blogger.com's template's (well the one I choose) uses floating divs of fixed width, This may be ok for some, but for those of us with screens larger the 640x480 a lot of space is wasted.

So I removed the floating divs and placed in a table, nice and simple and looks great

Changes to html template are as follow:-

#outer-wrapper {
  width: 660px;
  etc ...
  }


#main-wrapper {
  float:left;
  overflow:hidden;
  width:410px;
}

#sidebar-wrapper {
  float:right;
  overflow:hidden;
  width: 220px; 240px;
}

etc ...

<table>
<tr>
<td valign="top">
<div id="main-wrapper">

etc ...

</td>
<td valign="top">
<div id="sidebar-wrapper">

etc ...

<div class="clear">
</td>
</tr>
</table>
</div> <!-- end content-wrapper -->
<div id="footer-wrapper">

Additional Changes

I also added my own .body h4, h5 and pre styles to the ccs, to gives a much nicer look