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