Again for a friend

css/style.css

@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: #FFF; }
#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;
}

/*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: 22%; margin-right: 3%; }
.rightpanel { float: left; width: 75%; margin: 0 auto; text-align: center; }
.clear { clear: both; float: none; }

index.html

<!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=”#”>bhemdu project</a></h1></div>
<div id=”main”>
<div class=”leftpanel”>
left panel
</div>
<div class=”rightpanel”>
right panel
</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