new bh…..

 

<style>
@charset “utf-8″;
/* CSS Document */

* {margin:0;padding:0;}
body { overflow-y: scroll; background: #F1F1F1; font: normal normal 12px/20px Arial, Helvetica, sans-serif; color: #666; }
html, body {height: 100%; }
#wrapper { min-height: 100%; width: 1003px; margin: 0 auto; background: #EEE; }
#main { overflow:auto; padding-bottom: 180px; } /* must be same height as the footer */
#footer {
position: relative;
margin-top: -60px; /* negative value of footer height */
height: 60px;
clear:both;
background: #333;
text-align: center;
font: 11px/60px Tahoma, Geneva, sans-serif;
color: #FFF;
width: 100%;
}

/*Opera Fix*/
body :before {/* thanks to Maleika (Kohoutec)*/
content:””;
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J – negate effect of float*/
}
#header { margin: 0 auto; padding: 50px 25px; height: 50px; background: #EEE; color: #666; border-bottom: 5px solid #999; }
#header h1 { margin: 0; padding: 0; font: bold normal 35px/45px Arial, Helvetica, sans-serif; display: block; color: #F00; text-shadow: 1px 3px 5px #CCC; }
#header h1 a { text-decoration: underline; color: #F00; }
#header h1 a:hover { text-decoration: none; }

.leftpanel { float: left; width: 18%; margin-right: 2%; background: #DDD; }
.rightpanel { float: left; width: 80%; margin: 0 auto; text-align: center; background: #CCC; overflow: scroll; }
#table_container table { border-collapse: collapse; width: 100%; border: 1px solid #F00; overflow: scroll; font: normal normal 12px/18px Arial, Helvetica, sans-serif; }
#table_container table th { background: #000; color: #FFF; text-align: center; padding: 3px 5px; }
#table_container table td { background: #EEE; color: #000; text-align: left; padding: 2px; border-left: 1px solid #666; border-bottom: 1px solid #666; }
.clear { clear: both; float: none; }
</style>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Sticky footer</title>
<link rel=”stylesheet” href=”css/style.css” />
<!–[if !IE 7]>
<style type=”text/css”>
#wrapper {display:table;height:100%}
</style>
<![endif]–>
</head>

<body>

<div id=”wrapper”>
<div id=”header”><h1><a href=”#”>bh_project</a></h1></div>
<div id=”main”>
<div id=”table_container” style=”background: #FF0; padding: 5px;”>
<table cellpadding=”0″ cellspacing=”0″>
<tr valign=”top”>
<th>table_heading</th>
<th>table_heading</th>
<th>table_heading</th>
<th>table_heading</th>
<th>table_heading</th>
<th>table_heading</th>
<th>table_heading</th>
<th>table_heading</th>
<th>table_heading</th>
</tr>
<tr valign=”top”>
<td>table_heading</td>
<td>table_heading</td>
<td>table_heading</td>
<td>table_heading</td>
<td>table_heading</td>
<td>table_heading</td>
<td>table_heading</td>
<td>table_heading</td>
<td>table_heading</td>
</tr>
</table>
</div>
<div class=”clear”></div>
</div>
</div>
<div id=”footer”>All rights reserved. &copy; The quick brown fox jumps over the lazy dog</div>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s