new bh…..


@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;
background: #333;
text-align: center;
font: 11px/60px Tahoma, Geneva, sans-serif;
color: #FFF;
width: 100%;

/*Opera Fix*/
body :before {/* thanks to Maleika (Kohoutec)*/
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; }

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”&gt;
<html xmlns=””&gt;
<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%}


<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”>
<tr valign=”top”>
<div class=”clear”></div>
<div id=”footer”>All rights reserved. &copy; The quick brown fox jumps over the lazy dog</div>

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s