Friday, 29 January 2010

Create a webpage with Div tags and no tables

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>

-->

No comments: