The purpose of this post is to to show you how to make a 2 column website with a header and footer using divs and css. I also want to do it in such a way that will work in all browsers and is centered. Because IE, Firefox etc all do this differently I use one table. It is used as a container.
The HTML file <test.html> would look like this:
<html> <head> <link href="test-css.css" rel="stylesheet" type="text/css" /> </head> <body> <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <div class="main_wrapper"> <div class="header"> <p>Header</p> </div> <div class="left_column"> <p>This is the left Column</p> </div> <div class="right_column"> <p>This is the Right Column</p> </div> <div class="footer"> <p>Footer</p> </div> </div> </td> </tr> </table> </body> </html>
The CSS file <teset-css.css> would look like this:
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,
pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,
samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,
legend,table,caption,tbody,tfoot,thead,tr,th,td
{border:0;outline:0;vertical-align:baseline;background:transparent;margin:0;padding:0;}
.main_wrapper {
width: 1000px;
}
.header {
width: 1000px;
float: left;
}
.left_column {
background-color: #999;
width: 700px;
float: left;
}
.right_column {
background-color: #0F6;
width: 300px;
float: left;
}
.footer{
width: 1000px;
float: left;
}
Leave a Reply