I was searching to figure out how to create a page layout with no tables for one of my SharePoint projects. I designed one with the basic <div> tag and css and no <tables>, I used inline CSS script for this.
The code I used is as below
<!--
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- <link rel="stylesheet" href="" type="text/css"> -->
<html>
<head>
<style type="text/css">
#wrapper{
width:1000px;
margin:0px auto;
border:1px solid #acb;
padding:10px;
}
#header {
border:1px solid #bbb;
height:100px;
padding:10px;
}
#content {
margin-top:10px;
padding-bottom:10px;
}
#content div {
padding:10px;
border:1px solid #bbb;
float:left;
}
#content-left {
width:180px;
height:500px;
}
#content-main {
width:585px;
height:500px;
margin-left:10px;
}
#content-right {
width:150px;
height:500px;
margin-left:10px;
}
#footer {
float:left;
margin-top:10px;
margin-bottom:10px;
border:1px solid #abc;
height:80px;
padding:10px;
height:80px;
width:980px;
}
#bottom {
clear:both;
text-align:right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><center>Header</center></div>
<div id="content">
<div id="content-left">Left Content</div>
<div id="content-main"><center>Main Content</center></div>
<div id="content-right"><center>Right Content</center></div>
</div>
<div id="footer"><center>Footer</center></div>
<div id="bottom"></div>
</body>
</html>
-->
