Example of div-based three-column web page layout


CSS Sheet
body{padding: 0; margin: 0; background: #fff; }

h2{margin: 0; font: bold 18px Arial, Helvetica, sans-serif; color: #000;}

p{font: normal 12px Arial, Helvetica, sans-serif; color: #000;}

#header{width: 780px;  padding: 10px; margin-left: auto; margin-right: auto; background: #ffc;}

#navbar{ width: 780px; padding: 10px; margin-left: auto; margin-right: auto; background: #fc0;}
#navbar ul{list-style: none;}
#navbar li{ display: inline; padding-right: 4%;}
#navbar a:link,#navbar a:visited{font: normal 12px Arial, Helvetica, sans-serif; color: #039; text-decoration: none;}
#navbar a:hover{text-decoration: underline;}
#mainwrapper{width: 800px; margin-left: auto; margin-right: auto;}
#col1{float: left; width: 180px; padding: 10px; background: #eee;}
#col2{float: left; width: 375px; padding: 10px;}
#col3{float: right; width: 180px; padding: 10px;  background: #eee;}
#footer{clear: both;  width: 780px;  padding: 10px;  margin-left: auto; margin-right: auto;  background: #ffc;}

div

  1. No comments yet.
(will not be published)

  1. No trackbacks yet.