additional changes

<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%; }
input[type=”button”], input[type=”reset”], input[type=”submit”] {
background: #FFF; border: 1px solid #000; font: normal bold 12px/18px Tahoma, Geneva, sans-serif; cursor: pointer; color: #000;
}
input[type=”button”]:hover, input[type=”reset”]:hover, input[type=”submit”]:hover {
background: #000; border: 1px solid #000; font: normal bold 12px/18px Tahoma, Geneva, sans-serif; color: #FFF;
}
a { color: #F00; text-decoration: none; }
a:hover, a:active { text-decoration: underline; }
#wrapper { min-height: 100%; width: 1003px; margin: 0 auto; background: #EEE; }
#main { overflow:auto; padding-bottom: 180px; } /* must be same height as the footer */
#main h1 { font: normal bold 22px/36px Arial, Helvetica, sans-serif; color: #333; }
#main h2 { font: normal bold 18px/36px Arial, Helvetica, sans-serif; color: #333; }
#footer {
position: fixed;
bottom:0;
left:0;
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%;
}

#footer .left_content { display: block; padding-left: 3%; width: 47%; text-align: left; float: left; }
#footer .right_content { display: block; padding-right: 3%; width: 47%; text-align: right; float: right; }

/*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; overflow: scroll; vertical-align: top; padding-bottom: 20px; width: 1003px;”>
<table cellpadding=”0″ cellspacing=”0″ style=”width: 100%; min-height: 500px; vertical-align: top;”>
<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>
<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>
<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>
<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>
<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></div>
</div>
</div>
<div id=”footer”>
<div>
bhemdu making world beautiful
</div>
<div>
All rights reserved. &copy; The quick brown fox jumps over the lazy dog
</div>
<div></div>
</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