Making a two-column webtemplate using HTML and CSS

Consider this structure

<div class="mainDiv">
        <div class="headerDiv">
            <h2>This is my header</h2>
        </div>
        <div class="navigationDiv">
            <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
                <li><a href="#">Link5</a></li>
             </ul>
        </div>
        <div class="mainBodyDiv">
            <div class="leftContentDiv">Left</div>
            <div class="rightContentDiv">Right</div>
        </div>
        <div class="footerDiv">Footer</div>     
      
    </div>

 

Initially this will look like this...

Now we will write some CSS.

* {
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
 }
body,html
{
    margin:0px;
    padding:0px;
    color:#fff;
    background:#CCC;
}



.mainDiv
{
    width:900px;
    min-height:500px;
    background:#033;
    margin:0 auto;
}

.headerDiv
{
    width:900px;
    min-height:100px;
    background:#000;   
}

.headerDiv h2
{
    font-family:Georgia, "Times New Roman", Times, serif;
    padding:10px;
}

.navigationDiv
{
}

.navigationDiv ul
{
    list-style:none;
    margin:0;
    padding:0;
}

.navigationDiv li
{
    display:inline;
}

.navigationDiv li a
{
    text-decoration:none;
    color:#CCC;
    padding-left:10px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    font-weight:bold;
}

.navigationDiv li a:hover
{
    color:#FFF;
}

.mainBodyDiv
{
    width:900px;
    min-height:400px;
    background:#0F0;
}

.leftContentDiv
{
    width:550px;
    float:left;
    min-height:400px;
    background:#666;
}

.rightContentDiv
{
    width:350px;
    float:right;
    min-height:400px;
    background:#036;
}

.footerDiv
{
    width:900px;
    min-height:20px;
    background:#069;
}

All CSS is simple and easy to understand. I simply used float property of CSS. If first two blocks of CSS Code are new for you then simple go to my this article.


intialize the HTML

Your output should be something like this