How to create a floating two column webpage design using “div” and “css”

Posted on:

June 21st, 2009

Internet Explorer Logo 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;
}

This entry was posted on Sunday, June 21st, 2009 at 7:49 pm and is filed under CSS, HTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply