2 column fixed width layout

A sample layout from Pinoy Tech

Download Available

Download the 2-column fixed layout here

(x)HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>2-column-fixed-width</title>

<!-- Meta Tags -->
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />

<!-- CSS -->
<link rel="stylesheet" href="style.css" media="screen,projection" type="text/css" />

</head>
<body>

<div id="wrapper">
<div id="masthead">
<div id="inner_masthead">
<h1>2 column fixed width layout</h1>
<p>A sample layout from Pinoy Tech</p>
</div>
</div>
<div id="side_nav">
<div id="inner_side_nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="inner_content">
<h2>Content header</h2>
<p>Praesent est erat, venenatis vel, vulputate nec, euismod in, quam. Vestibulum ante. Nunc sodales magna in velit. 
Maecenas dui ipsum, pellentesque feugiat, interdum a, ornare scelerisque, risus. Aliquam laoreet ultricies velit. Duis lacus. 
In mauris elit, interdum at, imperdiet eu, tincidunt id, metus. Curabitur congue tristique metus. Proin elementum rhoncus dui. 
Maecenas lorem. Duis sodales. Duis quam diam, elementum eget, viverra suscipit, tincidunt laoreet, dolor. Suspendisse sed nulla ac 
erat ullamcorper tincidunt. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised 
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software 
like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div id="footer">
<div id="inner_footer">&copy; 2007 - 2008 <a href="http://pinoytech.org/thorpe-obazee/tutorials/2-column-fixed-layout/">2 Column Fixed Layout</a> by <a href="http://pinoytech.org/">Pinoy Tech</a></div>
</div>

</div>

</body>

CSS Content


/* globals */
*{
	margin: 0; 
	padding: 0;
}

body{
	text-align:center;
	font: .85em Helvetica, Arial, sans-serif;
}

/*structurals*/
#wrapper {
	text-align: left;
	margin: 0 auto;
	width: 950px;
}

#masthead {}

#inner_masthead {
	background: #E9EEF1;
	padding: 1em;
}

#inner_masthead p{
	font: .85em Helvetica, Arial, sans-serif;
	font-style: italic;
}
#side_nav {
	float: left;
	width: 300px;
}
	
#inner_side_nav {
	background: #0b5eb4;
	padding: 1em;
}

#inner_side_nav ul li{
	list-style: none;
}

#inner_side_nav ul li a{
	color: #FFFFFF;
}

#content {
	float: left;
	width: 650px;
}

#inner_content {
	background: #F8F8F8;
	padding: 1em;
}
#footer {
	clear: both;
}

#inner_footer {
	color: #888;
	border-top: 2px #333 solid;
	padding: 1em;
}

/* tags */

a {
	color: #0000cc;
}

h1, h2 {
	font-family: Georgia, serif;
	font-style: italic;
}
p {
	padding: 1em 0;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.