Two Column CSS Layout
The layout consists of a header, a main content column, a left column, a right column and a footer. It is fixed width centered layout. A pretty basic layout, and not at all difficult to create with CSS.
Below are the basic markup for this layout, you will notice that each category (ex. header, content) are having comments. So, you will not confuse which code is intended for.
Insert the code below inside your <body> ... </body>
<!-- Header -->
<div class="header">
<!-- Header -->
<!-- Content -->
<div class="content">
<!-- Content -->
<!-- Footer -->
<div class="footer">
<!-- Footer -->
<div class="header">
This is header
</div><!-- Header -->
<!-- Content -->
<div class="content">
<!-- Left Column -->
<div class="left-column">
<!-- Left Column -->
<!-- Right Column -->
<div class="right-column">
<!-- Right Column -->
</div><div class="left-column">
Left Column
</div><!-- Left Column -->
<!-- Right Column -->
<div class="right-column">
Right Column
</div><!-- Right Column -->
<!-- Content -->
<!-- Footer -->
<div class="footer">
Copyright ® alfieindesigns. All rights reserved.
</div><!-- Footer -->
Create mainstyle.css, then here's the CSS code:
/********************************************
Coded by: alfieindesigns
Website: http://alfie-css.blogspot.com/
Inquiries: alfienollora@yahoo.com
********************************************/
/**********************
COMMON STYLE
**********************/
body {
HEADER
**********************/
.header {
CONTENT
**********************/
.content {
FOOTER
**********************/
.footer {
Coded by: alfieindesigns
Website: http://alfie-css.blogspot.com/
Inquiries: alfienollora@yahoo.com
********************************************/
/**********************
COMMON STYLE
**********************/
body {
background:#EEEEEE; /* Add general background (remove this if not needed) */
font-family:Arial, Helvetica, sans-serif; /* Change value depends on layout font family/style (only for webfonts) */
font-size:12px;
margin:0;
padding:0;
color:#333; /* Change value depends on general font color */
font-weight:100;
}
/**********************font-family:Arial, Helvetica, sans-serif; /* Change value depends on layout font family/style (only for webfonts) */
font-size:12px;
margin:0;
padding:0;
color:#333; /* Change value depends on general font color */
font-weight:100;
}
HEADER
**********************/
.header {
background:#E1D4C0;
border-bottom:1px solid #999;
width:940px; /* Change depends on website layout */
height:100px;
margin:0 auto; /* Center div */
padding:10px;
}
/**********************border-bottom:1px solid #999;
width:940px; /* Change depends on website layout */
height:100px;
margin:0 auto; /* Center div */
padding:10px;
}
CONTENT
**********************/
.content {
background:#E1D4C0;
border-top:1px solid #FFF;
width:960px; /* Change depends on website layout */
margin:0 auto; /* Center div */
}
border-top:1px solid #FFF;
width:960px; /* Change depends on website layout */
margin:0 auto; /* Center div */
}
/* Left Column */
.left-column {
.right-column {
/**********************.left-column {
background:#d5cbbd;
width:280px;
height:500px;
float:left;
padding:10px;
}
/* Right Column */width:280px;
height:500px;
float:left;
padding:10px;
}
.right-column {
background:#c3b6a2;
width:640px;
height:500px;
float:left;
padding:10px;
}
width:640px;
height:500px;
float:left;
padding:10px;
}
FOOTER
**********************/
.footer {
clear:both; /* Use to clear the float so it will not follow the float */
background:#E1D4C0;
border-top:1px solid #FFF;
width:940px; /* Change depends on website layout */
margin:0 auto; /* Center div */
text-align:center;/* Center content/copy */
padding:10px;
}
background:#E1D4C0;
border-top:1px solid #FFF;
width:940px; /* Change depends on website layout */
margin:0 auto; /* Center div */
text-align:center;/* Center content/copy */
padding:10px;
}
On the <head> tag insert the code below: (make sure path is correct "css/") i put my mainstyle.css on css folder.
<link rel="stylesheet" type="text/css" href="css/mainstyle.css" />
That's all! Enjoy! God bless always!
the basic and simple layout
ReplyDeleteLegal Software Singapore