Tuesday, April 28, 2009

CSS Layout technique #2: Center aligned website with 2 Columns, Header and Footer

This is one of the most common layout technique used in web design. Most of the web designers prefer fixed width website which makes the website look very symmetric and easy to focus. I have included two different ways you can plan this layout.
The first technique uses the same container for the header, footer and 2 columns. You can remove the margins from the inner columns, header and footer to fit inside the background container.

CenterAlignedWebsite_1
CSS Code:
.container {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    background-color: #666;
    padding: 1px;
}
.header {
    height: 100px;
    background-color: #999;
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
    padding: 5px;
}
.left_col {
    height: 500px;
    background-color: #CCC;
    width: 100px;
    float: left;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 5px;
}
.center_col {
    background-color: #CCC;
    height: 500px;
    float: left;
    position: relative;
    width: 650px;
    margin: 10px;
    padding: 5px;
}
.footer {
    height: 100px;
    background-color: #999;
    position: relative;
    clear: both;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 5px;
}

HTML Code:
<div class="container">
<div class="header"></div>
<div class="left_col"></div>
<div class="center_col"></div>
<div class="footer"></div>
</div>

This second layout uses container to hold the left and center columns only. The header and footer are aligned separately with fixed width.

CenterAlignedWebsite_2 
CSS Code:
.header {
    height: 100px;
    background-color: #999;
    margin-right: auto;
    margin-left: auto;
    padding: 5px;
    width: 800px;
}
.container {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
}
.left_col {
    height: 400px;
    background-color: #CCC;
    width: 100px;
    float: left;
    position: relative;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.center_col {
    background-color: #CCC;
    height: 400px;
    float: left;
    position: relative;
    width: 670px;
    padding: 5px;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}
.footer {
    height: 100px;
    background-color: #999;
    position: relative;
    clear: both;
    margin-right: auto;
    margin-left: auto;
    padding: 5px;
    width: 800px;
}

HTML Code:
<div class="header"></div>
<div class="container">
<div class="left_col"></div>
<div class="center_col"></div>
</div>
<div class="footer"></div>

Technorati Tags:

8 comments:

  1. That was a great message in my carrier, and It's wonderful commands like mind relaxes with understand words of knowledge by information's. PHP Training in Chennai

    ReplyDelete
  2. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

    ReplyDelete
  3. mytectra placement Portal is a Web based portal brings Potentials Employers and myTectra Candidates on a common platform for placement assistance.

    ReplyDelete

Thanks a lot for your valuable comments :)