Static 3 Column CSS Layout

XHTML CSS template that shows the layout of the contents divided into 3 columns. Navigation links on the left, the middle is the main content, and the right is highlighted content.

This CSS layout will not change the layout with the size of the browser window, no matter how you enlarge or reduce the display screen.

Resources:

CSS Code

body {
  text-align:center;
  font-family: Georgia, Serif;
}

#frame {
  width:750px;
  margin-top:10px;
  text-align:left;
}

#main {
  float: left;
  width: 350px;
  background: #F5F5F5;
  padding: 10px;
  margin:5px;
}

#leftcontent {
  float: left;
  width: 140px;
  background: #FFFFCC;
  border: 1px dashed #CCCCCC;
  padding: 10px;
  margin: 5px;
}

#rightcontent {
  float: left;
  width: 140px;
  background: #DDEEFF;
  border: 1px dashed #CCCCCC;
  padding: 10px;
  margin: 5px;
}

#rightcontent p {
  font-size:10px;
}

#leftcontent a {
  font-size:12px;
  line-height:2;
}

h1 {
  font-size:large;
}

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Static 3 column CSS layout</title>

<style type="text/css">

body {
  text-align:center;
  font-family: Georgia, Serif;
}

#frame {
  width:750px;
  margin-top:10px;
  text-align:left;
}

#main {
  float: left;
  width: 350px;
  background: #F5F5F5;
  padding: 10px;
  margin:5px;
}

#leftcontent {
  float: left;
  width: 140px;
  background: #FFFFCC;
  border: 1px dashed #CCCCCC;
  padding: 10px;
  margin: 5px;
}

#rightcontent {
  float: left;
  width: 140px;
  background: #DDEEFF;
  border: 1px dashed #CCCCCC;
  padding: 10px;
  margin: 5px;
}

#rightcontent p {
  font-size:10px;
}

#leftcontent a {
  font-size:12px;
  line-height:2;
}

h1 {
  font-size:large;
}

</style>

</head>

<body>

<div id="frame">

<div id="leftcontent">
<h1>Left Content</h1>
<a href="#">Link number one</a><br>
<a href="#">Link number two</a><br>
<a href="#">Hyperlinks are good</a><br>
<a href="#">Everything is good</a><br>
<a href="#">This is navigation link</a><br>
<a href="#">Oh my god</a><br>
<a href="#">I like HTML</a><br>
<a href="#">I also like CSS</a><br>
<a href="#">And more</a>
</div>

<div id="main">
<h1>Center Content</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>

<div id="rightcontent">
<h1>Right Content</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>

</div>

</body>
</html>

Webmaster » XHTML CSS » You are here

Related Links:

CSS Basic Formatting Code

Home | Sitemap | Bookmark This Page

Sponsored Links