Categories
Design Internet Technology

CSS Basic Template

Here’s a basic CSS template that you can use. There’s a header, a footer, a left side and a right side.

You need to create an index.html and mystyle.css file. Place them in the same directory.

css_example

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<title>CSS Template</title>
</head>

<body id="backdrop">
<div id="container">
  <div id="header">
    <center>Header</center>
  </div>
  <div id="leftBar">
    <center>Left Side</center>
  </div>
  <div id="maincontent">
    <center>Main Content</center>
  </div>
  <div id="rightBar">
    <center>Right Side</center>
  </div>
  <div id="footer">
    <center>Footer</center>
  </div>
</div>
</body>
</html>

mystyle.css

@charset "UTF-8";
 /* CSS Document */
#backdrop {
     background-color:#333;
 }
#container {
   margin:auto;
   width: 100%;
   background: #ffffff;
 }
#header {
   background: #90F;
 }
#leftBar {
   float: left;
   width: 20%;
   background: #999;
 }
#maincontent {
   float:left;
   width:60%;
   background-color: #FF9;
 }
#rightBar {
   float:right;
   width: 20%;
   background: #999;
 }
#footer {
   clear:both;
   background:#90F;
 }
Comments

By Tommy Elmesewdy

DevOps Engineer

5 replies on “CSS Basic Template”

I am looking for this from long time… great work, Thanks

Can we make the default height of #maincontent 600px. Mean page height must be 600px whether we write one line of text, and if we write long article it should dynamically increase the height. without changing in css file. Thanks

Zeeshan