Brugbart 468x60 Banner

Float Based 3-column Layout

This is an example of a CSS float based layout. Note: The width of the CenterContent was smaller then the expected 70%, this is to avoid "pushing" of the RightContent division.

As you can see its easy to create 3-column layouts, as long as the heights of the columns dosn't need to be of equal heights.

Some of you may want to create equal-height-columns, using tables for the job is easy; its a lot harder when dealing with CSS based layouts, there are several "hacks" to achive the effect, but i won't recommend using them.

This is a part of the tutorial entry CSS Float Based Layouts. You may use it in your own layouts, and projects, without linking back, (or referring to me in any way).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

  <head>
    <title>Float Based 3-column Layout</title>
    <style type="text/css">
     html, body {
       height: 100%;
     }
     body {
       background: #72c1ca;
       margin: 0; /* Removes default margin in browsers */
       text-align: center; /* The way to center elements in IE */
     }
     #basement {
       min-height: 100%;
       height: 100%;
       min-width: 1004px;
       max-width: 1200px;
       margin: 0 auto; /* The normal way to center stuff */
       text-align: left; /* Resetting text-align for Basement, and its children. */
     }
     #TopContent {
       width: 100%;
       height: 108px;
       min-width: 1004px;
       background: #e6f4f4 url("LogoB.jpg") no-repeat top left;
       text-align: right;
     }
     #LeftContent {
       float: left;
       width: 15%;
       border-bottom: 1px solid #e6f4f4;
       border-right: 1px solid #e6f4f4;
       border-left: 1px solid #e6f4f4;
     }
     #RightContent {
       float: right;
       width: 15%;
       text-align: right;
     }
     #CenterContent {
       width: 66%;
       float: left;
       padding-left: 1em;
     }
     #LeftContent ul, #RightContent ul {
       list-style-type: none; /* Removes the bullets on lists */
       margin: 0 0 1em 0.5em;
       padding: 0;
     }
     a:link { color: #236161; }
     a:visited { color: #236161; }
     a:active { color: #236161; }
     a:hover { color: #e6646d; }
     h1 {
       margin: 0.5em 0 0 0;
       font-size: 1.3em;
       color: #0d5288;
     }
     #Mtop {
       background: #e6f4f4 url("Menu.png") no-repeat top right;
       height: 25px;
     }
     #Mbottom {
       background: #e6f4f4 url("Menu_Bottom.png") no-repeat bottom left;
       height: 25px;
     }
    </style>
  </head>

  <body>
    <div id="basement">
    <div id="TopContent">
    </div>
      <div id="LeftContent">
       <div id="Mtop"></div>
        <ul>
          <li><a href="http://www.brugbart.com/?TID=1">An Introduction to HTML</a></li>
          <li><a href="http://www.brugbart.com/?AID=6">An Introduction to CSS</a></li>
          <li><a href="http://www.brugbart.com/?TID=6">An Introduction to PHP</a></li>
        </ul>
        <ul>
          <li><a href="http://www.brugbart.com/?AID=54">Terms of Service</a></li>
          <li><a href="http://www.brugbart.com/Search.php">Search!</a></li>
          <li><a href="http://www.brugbart.com/?AID=9">Contact</a></li>
          <li><a href="http://www.brugbart.com/?AID=8">About</a></li>
        </ul>
       <div id="Mbottom"></div>
      </div>

      <div id="CenterContent">
        <h1>Float Based 3-column Layout</h1>
        <p>My first Website</p>
      </div>

      <div id="RightContent">
      </div>
    </div>
  </body>

</html>

Brugbart Skyscraper Banner