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>