It's Me, Tommy

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;
 }

Tommy Elmesewdy

, ,
, ,

5 responses to “CSS Basic Template”

  4. 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

    • You can try adding min-height: 600px; to #maincontent.

      #maincontent {
        float:left;
        width:60%;
        min-height: 600px;
        background-color: #FF9;
      }