| ID: 192 |
Category: CSS |
Date Posted: 16/02/2011 |
Page Impressions : 4,062 |
|
 |
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:
|
|
|
