RSS Feeds 
Feed Comment Define the Body Section:
First define the body style. Here I have choose 12px font size. Having Courier New, Courier, Mono font. Background color is #ddd and margin and padding of page is set for 0px;
Here the code for body section
body {
font:12px “Courier New”, Courier, mono;
background:#ddd;
padding:0px;
margin:0px;
}
The Main Body Wrapper :
Now create sytle sheet for the main body wrapper. Here I am taking the size of 800px width for the main wrapper which will be suitable for the 800×600 resolution. The margin of the wrapper left and right is set to auto and top is set 10px and padding is set for 0px.
Here is the code for wrapper.
#wrapper {
width:800px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
}
Ok Now Lets Movie for the Header. I have designed header having background with 50px height.
Here is Header code:
#header {
background:#CFCFCF;
height:50px;
}
And now set Heading Style For Header where we can type the site logo.
#header h1 {
font-size:16px;
padding:10px;
margin:0px;
}
I have create a simple div for wrapping menu inside the header div.
#menu{
background:#CFCFCF;
height:20px;
}
Menu Text paragraph style:
#menu p{
font-size:10px;
padding:10px;
margin:0px;
}
Now move for the left div and here is the code for left div is:
#leftcontent {
width:175px;
padding:0px;
float:left;
background:#fff;
}
Now define the center div:
Center Div Layout
#divcenter {
width:450px;
padding:0px;
float:left;
background:#eee;
}
And Right Column:
#rightcontent {
width:175px;
padding:0px;
float:left;
background:#fff;
}
Lets define heading style for divs:
Heading Style
h1 {
margin:0px 10px 10px 10px;
color:#003366;
font-size:14px;
padding-top:10px;
}
And now move for the Paragraph style for all columns:
p{
margin:0px 10px 10px 10px;
color:#000000;
}
Make some style for the link now
a {
text-decoration:none;
font-weight:bold;
color:#cc0000;
}
And the Footer Div here:
#footer{
height:20px;
background:#000;
}
Style for Footer Paragraph:
#footer p{
color:#FFFFFF;
text-align:center;
}
Ok Now Lets move for the HTML
<div id=”wrapper”>
<div id=”header”>
<h1>Welcome To 3 Column CSS Layout Page.</h1> Insert the Heading For the Page.
<div id=”menu”><a href=”#”>Home </a> | <a href=”#”>About </a> | <a href=”#”>Contact Us </a></div> And Add the Menu here.
</div>
Ok Left Move for the Left Content Div:
<div id=”leftcontent”>
<h1>Left Heading </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</div>
Now Center Div
<div id=”divcenter”>
<h1>Center Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>
And the Right Div:
<div id=”rightcontent”>
<h1>Right Heading </h1>
<p>
Different Menu <br/>
<a href=”#”>LINK 1 HERE… </a><br/>
<a href=”#”>LINK 2 HERE…</a><br/>
<a href=”#”>LINK 3 HERE…</a><br/>
<a href=”#”>LINK 4 HERE…</a><br/>
</p>
<h1>Some News </h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</div>
The Footer:
Before starting footer clear the float. So here I use break tag with clear attributes.
<br clear=”all” />
<div id=”footer”><p>Copyright THEMEHEVEN 2009</p></div>
ENJOY!
GET CSS CODE HERE
body {
font:12px "Courier New", Courier, mono;
background:#ddd;
padding:0px;
margin:0px;
}
a {
text-decoration:none;
font-weight:bold;
color:#cc0000;
}
#wrapper {
width:800px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
}
#leftcontent {
width:175px;
padding:0px;
float:left;
background:#fff;
}
#divcenter {
width:450px;
padding:0px;
float:left;
background:#eee;
}
#rightcontent {
width:175px;
padding:0px;
float:left;
background:#fff;
}
#header {
background:#CFCFCF;
height:50px;
}
#menu{
background:#CFCFCF;
height:20px;
}
#menu p{
font-size:10px;
padding:10px;
margin:0px;
}
p{
margin:0px 10px 10px 10px;
color:#000000;
}
h1 {
margin:0px 10px 10px 10px;
color:#003366;
font-size:14px;
padding-top:10px;
}
#header h1 {
font-size:16px;
padding:10px;
margin:0px;
}
#rightcontent p { font-size:10px}
#footer{
height:20px;
background:#000;
}
#footer p{
color:#FFFFFF;
text-align:center;
}
GET HTML CODE HERE
<div id="wrapper"> <div id="header"> <h1>Welcome To 3 Column CSS Layout Page.</h1> <div id="menu"><a href="#">Home </a> | <a href="#">About </a> | <a href="#">Contact Us </a></div> </div> <div id="leftcontent"> <h1>Left Heading </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </div> <div id="divcenter"> <h1>Center Heading</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> </div> <div id="rightcontent"> <h1>Right Heading </h1> <p> Different Menu <br/> <a href="#">LINK 1 HERE... </a><br/> <a href="#">LINK 2 HERE...</a><br/> <a href="#">LINK 3 HERE...</a><br/> <a href="#">LINK 4 HERE...</a><br/> </p> <h1>Some News </h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </div><br clear="all" /> <div id="footer"><p>Copyright THEMEHEVEN 2009</p></div> </div>
Leave Your Comments Below