Lissa Explains it All -- CSS Two Column and Three Column Layout

Lissa Explains it All -- HTML Help for Kids

How do I make a CSS layout? You can get started with these copy and paste layouts. The layout of the page you're looking at now was done with CSS. It has a top header div and three columms. The center column is fluid so that if you minimize the window the layout should fit every browser and resolution. Using CSS to format your pages instead of tables or frames is much more practical because you can change the layout on every page of your site with just one stylesheet. Also, CSS loads much faster than tables or frames and makes your site accessible to more people. The entire HTML code is included in a text area for each of the examples shown below.

The actual divs can be positioned in any order you want. If you want your content to load first, add that div first in the body of your html, for example:

<div id="content">content goes here</div>

<div id="menu">navigation goes here</div>

In the above example, the content would load first, and then the menu.

Basic Two Column Layout with Left Menu:

two column left menu CSS layout example

Basic two column layout with right menu:

two column with right menu CSS layout example

Basic two column layout with header:

two column with header CSS fluid layout example

<html>
<head>
<title>Two Column CSS Layout with Header</title>
<style type="text/css">

body 
{ margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

#header {
  margin: 20px;
  padding: 10px;
  height: 100px;
}
#left {
  position: absolute;
  left: 15px;
  top: 160px;
  width: 200px;
}
#center {
  top: 0;
  margin-left: 230px;
  margin-right: 15px;
}
</style>
</head>

<body>

Your header will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.

</div>

Your left menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.

</div>

<div id="center">
All of your content goes in this div.  This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly.  To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>

</body>
</html>

Basic three column layout:

two column with right menu CSS layout example

<html>
<head>
<title>Three Column CSS Layout</title>
<style type="text/css">

body 
{ margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

#left {
  position: absolute;
  left: 5px;
  padding: 0px;
  top: 0px;
  width: 150px;
}

#center {
  margin-left: 200px;
  padding: 0px;
  margin-right: 200px;
  top: 0px;
}
#right {
  position: absolute;
  right: 15px;
  padding: 0px;
  top: 0px;
  width: 150px;
}
</style>
</head>

<body>

</div>

Your right menu will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.

</div>

</body>
</html>

Basic three column layout with header:

three column with header CSS fluid layout example

<html>
<head>
<title>Three Column CSS Layout with Header</title>
<style type="text/css">

body 
{ margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

#header {
  margin: 20px;
  padding: 10px;
  height: 100px;
}
#left {
  position: absolute;
  left: 15px;
  top: 160px;
  width: 200px;
}
#center {
  top: 0;
  margin-left: 230px;
  margin-right: 230px;
}
#right {
  position: absolute;
  right: 15px;
  top: 160px;
  width: 200px;
}
</style>
</head>

<body>

</div>

</div>

</div>

</body>
</html>

This Web site is registered with the Library of Congress Copyright Office.