Tableless Layouts
Updated: 5.1.2009
Creating a tabless layout is simple. Below is all the code you will need to create a tableless layout with columns made from DIV tags, using simply CSS and HTML.
This article was written for those with some CSS and HTML experience.
CSS Document(Save as "stylesheet.css")
/* START Reserved Elements */
body{
margin:0px;
padding:0px;
text-align:center;
}
img{
border:none;
}
form{
padding: 0px;
margin: 0px;
}
a{
}
a:hover{
}
h1{
}
p{
}
ul{
padding:0px;
margin:0px;
}
li{
padding:0px;
margin:0px;
}
/* END Reserved Elements */
/* START Custom Global Styles */
.divClr {
height: 0px;
clear: both;
}
.col1, .col2{
float:left;
width:50%;
}
.container{
padding: 0px;
margin: 0px auto;
width:800px;
}
/* END Custom Global Styles */
HTML Document
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="container">
<div class="col1">Left Column</div>
<div class="col2">Right Column</div>
<div class="divClr"> </div>
</div>
</body>
</html>