Static 3 Column CSS Website layout

This template demonstrates 3 column static web page layout implementation using CSS and no tables. The layout can be classified as top, left, middle, and right. You are free to change the column's background color, borders, and font styles and so on.

Please see the following 3 column CSS layout static demo website. You can also use CSS to create a unique style of the website layout without any of the tables.

Resources:

CSS Code

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

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

#top {
  width: 695px;
  background: #CCFFCC;
  border: 1px dashed #CCCCCC;
  padding: 10px;
  margin: 10px;
}

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

#top {
  width: 695px;
  background: #CCFFCC;
  border: 1px dashed #CCCCCC;
  padding: 10px;
  margin: 10px;
}

#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="top">
<h1>The very top</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

<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