CSS Style:
<style media="all" type="text/css">
html { height: 100%;margin-bottom: 1px; }
body { margin:10px;font-family: Arial;font-size: 80%;line-height: 135%;background:#666; }
a { text-decoration: none; }
a:hover { text-decoration: none; }
.clr { clear: both; }
#container { width:886px; margin: auto; }
#header { background-color: #F90; height: 150px; }
#content { background-color: #690; width: 586px; min-height:200px; }
#sidebar_left { background-color: #060; width: 150px; min-height:200px; }
#sidebar_right { background-color: #6C0; width: 150px; min-height:200px; }
#footer { background-color: #FFC142; text-align:center; height:59px; padding-bottom:68px; }
.float { float: left; }
.clear { clear: both; }
</style>
HTML Code:
<div id="container">
<div id="header">
HEADER
</div>
<div id="sidebar_left" class="float">
LEFT
</div>
<div id="content" class="float">
CONTENT
</div>
<div id="sidebar_right" class="float">
RIGHT
</div>
<div id="footer" class="clear">
FOOTER
</div>
</div>
Full Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML CSS 3 Coloum by dr.emi</title>
<style media="all" type="text/css">
html { height: 100%;margin-bottom: 1px; }
body { margin:10px;font-family: Arial;font-size: 80%;line-height: 135%;background:#666; }
a { text-decoration: none; }
a:hover { text-decoration: none; }
.clr { clear: both; }
#container { width:886px; margin: auto; }
#header { background-color: #F90; height: 150px; }
#content { background-color: #690; width: 586px; min-height:200px; }
#sidebar_left { background-color: #060; width: 150px; min-height:200px; }
#sidebar_right { background-color: #6C0; width: 150px; min-height:200px; }
#footer { background-color: #FFC142; text-align:center; height:59px; padding-bottom:68px; }
.float { float: left; }
.clear { clear: both; }
</style>
</head>
<body>
<div id="container">
<div id="header">
HEADER
</div>
<div id="sidebar_left" class="float">
LEFT
</div>
<div id="content" class="float">
CONTENT
</div>
<div id="sidebar_right" class="float">
RIGHT
</div>
<div id="footer" class="clear">
FOOTER
</div>
</div>
</body>
</html>
Preview Page:
http://www.csslovers.co.cc/online-view/ ... -3col.html
