Stretch table width and height to 100% of screen using css and html. CSS guides, tutorials and help

Date Posted: Wednesday 16th of February 2011 | Category: CSS

Stretch table width and height to 100% of screen using css and html
Copy and paste the code below in to your html document.

The code below will create a header, left col and right col fixed at 200 pixels whatever screen resolution the user displays the template on.

It will also fill the screen exactly at 100% both width and height.

Having a website which fills the full width and full height of your browser in my opinion makes gives you a better shop window to advertise your products and services.

<style>
body {
margin: 0px;
padding: 0px;
}
table#pagelayout {
height:100%;
margin:auto;
}
.left-col {
width:100%;
}
.right-col {
width:200px;
}
</style>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="56" bgcolor="#B9B9B9"><table width="100%" border="0" cellspacing="4" cellpadding="4">
<tr>
<td height="54"><h2 align="center">This is the Header</h2></td>
</tr>
</table></td>
</tr>
</table>
<table width=100% id=pagelayout cellpadding="0" cellspacing="0" class="wide-table">
<tr>
<td class="left-col" valign="top" bgcolor="#CCCCCC"><table width="100%" border="0" cellspacing="4" cellpadding="4">
<tr>
<td><h4>This is the left panel 100% wide</h4></td>
</tr>
</table></td>
</td>
<td class="right-col" valign="top" bgcolor="#EBEBEB"><table width="200" border="0" cellspacing="4" cellpadding="4">
<tr>
<td><h4>This is the Right Panel 200px width</h4></td>
</tr>
</table></td>
</tr>
</table>

Here it the output below: