Two column with text header
<!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" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="name of the author." />
<meta name="keywords" content="key words that you are targeting for search engines." />
<meta name="description" content="description of the main conents." />
<style type='text/css'>
/*Style sheet for NoProbs must be included to with HTML.*/
/*Styles for body.*/
body
{
margin: 0 auto;
padding: 0;
font: 76% Verdana, Helvetica, Tahoma, Arial, sans-serif;
background: #f4f4f4 url(Gururaj-Images/background.gif) top center repeat-y;
color: #494949;
}
/*Styles for main content which will be wrapped to centere. */
#MainWrapper
{
background: #ffffff;
color: #303030;
margin: 0 auto;
width: 800px;
}
/*Styles for the main header at the top. */
#Header
{
color:#ffffff;
padding-top:12px;
padding-bottom:12px;
padding-left:20px;
background-color: #79A3C1;
}
#Header a
{
font-weight:normal;
font-size:27px;
text-decoration:none;
background-color: #79A3C1;
color:#ffffff;
}
/*Styles for the main header menus. */
#HeaderMenus
{
color:#000000;
height:1.2em;
line-height:1.2em;
padding-left:11px;
margin:0 0 10px 0;
background-color: #dcdcdc;
border-bottom:solid 2px #a9a9a9;
}
#HeaderMenus ul
{
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#HeaderMenus li
{
float:left;
list-style-type:none;
}
#HeaderMenus li a
{
display:block;
padding:0 10px;
font-size: 0.9em;
font-family: Verdana, Helvetica, Tahoma, Arial, sans-serif;
text-decoration:none;
background-color:inherit;
color:#000000;
}
#HeaderMenus .selected
{
color: #336699;
text-decoration: none;
background-color:inherit;
}
#HeaderMenus a:hover
{
background-color:inherit;
color: #336699;
text-decoration: none;
}
/*Styles for the contens that are displayes in side column. */
#SideContents
{
float:right;
width:170px;
color: #333300;
padding:0 6px 0 7px;
line-height:1.4em;
background-color:#ffffff;
}
#SideContents h3
{
color: #4D6E8F;
font-size: 1.4em;
margin: 0 auto;
padding: 0 0 8px 0;
background-color:inherit;
}
#SideContents p
{
font-size: 90%;
text-align: justify;
background-color:inherit;
color: #333300;
margin: 0 0 12px 0;
}
#SideContents a
{
text-decoration: none;
background-color:inherit;
color: #660000;
}
/*Styles for the main contets in the page. */
#MainContent
{
margin: 0 186px 18px 10px;
padding: 0 12px 0 10px;
border-right: 1px solid #DDD;
line-height: 1.6em;
}
#MainContent h2
{
color:#000000;
font-size: 1.5em;
margin: 0 0 0.5em 0;
background-color:inherit;
text-align: left;
}
#MainContent p
{
color:#494949;
text-align: justify;
background-color:inherit;
}
#MainContent a
{
text-decoration: none;
background-color:inherit;
color: #000066;
}
#MainContent img
{
display:inline;
color: inherit;
background-color:inherit;
border: 2px solid #79A3C1;
}
/*Styles for the page footer. */
#Footer
{
margin: 0 auto;
padding: 8px 0 2px 0;
border-top: 1px solid #ddd;
width: 760px;
text-align: center;
font-size: 0.9em;
line-height: 1.6em;
}
#Footer a
{
color: #000099;
background-color: inherit;
text-decoration: none;
}
#Footer a:hover
{
text-decoration: underline;
}
/*Styles for other classes. */
.AlignLeft
{
margin: 10px 10px 5px 0;
float: left;
}
.AlignRight
{
margin: 10px 0 0 10px;
float: right;
}
</style>
<title>NoProbs</title>
</head>
<body>
<div id="MainWrapper">
<div id="Header"><a href="index.html">Whatever You Want</a></div>
<div id="HeaderMenus">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Download</a></li>
<li><a href="index.html">Purchase</a></li>
<li><a href="index.html">Support</a></li>
<li><a href="index.html">Contact</a></li>
<li><a href="index.html">About</a></li>
</ul>
</div>
<div id="SideContents">
<h3>Articles</h3>
<p>
<b>Firefox:</b> The best all-around alternative to IE. Great for power users who
want to add functionality to the browser, and appropriate for newbies just getting started
<a href="http://www.pcworld.com/reviews/article/0,aid,120763,pg,12,00.asp">...</a>
</p>
<p>
<b>Wikipedia:</b> The free web based encyclopedia that anyone can edit.
Anyone can add and edit Wikipedia content via a Web browser. It
receives about 50 million hits every day and its English-language
version now has over half a million articles
<a href="http://www.pcworld.com/reviews/article/0,aid,120763,pg,12,00.asp">...</a>
</p>
<h3>Regular Links</h3>
<a href="http://oswd.org/">OWSD</a><br/>
<a href="http://openwebdesign.org/">Open Webdesign</a><br/>
<a href="http://www.4templates.com/">4templates</a><br/>
<a href="http://www.creatingonline.com/webmaster/templates/">Creating Online</a><br/>
<a href="http://en.crystalxp.net/">CrystalXP</a><br/>
<a href="http://en.wikipedia.org/wiki/Main_Page">Wikipedia</a><br/>
</div>
<div id="MainContent">
<h2>Intro to Design</h2>
<p><img src="book.jpg" class="AlignLeft" alt="Book Image" />
Hi, Thanks for your interest in this web template. This is my first
design as open web template. I am from Bangalore [India] and by profession
I am a developer and have great interest in web design. Since OSWD
and Openwebdesing is a great place for web designers, so I have designed
this open web template to get a first hand experience in web designing. All the
things in this template is learned form OSWD and Openwebdesing and I am
great full these two great sites. The tools that were used to do this one
are HTML-Kit, GIMP and Color Schemer Studio.
</p>
<p>This is a simple template with two columns and one header, a menu
and contents with two images. This template can be used where the content
is more important than presentation and needs one decent layout with decent design.
This is a valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> and
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and it is also
very easy to customize. It has only two images one image [GIF] for background,
other for contents which can be removed from the contents if not needed with no
affect to design. The side column can be used add favorite links, Google ads etc.
I have tested this template in Firefox 1.5, Opera 8.5, Netscape 8.0.4 and IE 6.0 and it
works fine in all these browsers. You can use this template with no restrictions,
a simple notification email to either <a href="http://oswd.org/user/contact/id/7724">OSWD</a>
or <a href="http://openwebdesign.org/email.phtml?user=kpgururaja">Openwebdesign</a>
would be encouraging. Thank you very much for your support.
</p>
<h2>Just for Info</h2>
<p><a href="http://www.imdb.com/title/tt0086879/">Amadeus</a>
was named the 53rd greatest film of all time by The American Film Association. Since its
release in 1984, it's gained both critical acclaim and many fans from all over the world.
</p>
<p><img src="book.jpg" class="AlignRight" alt="Book Image" />
Amadeus takes place in 18th Century Austria and tells the story of one of the greatest
musical prodigies ever known, <a href="http://www.amadeusimmortal.com/people/mozart.php">
Wolfgang Amadeus Mozart</a>. The story begins with ageing composer
<a href="http://www.amadeusimmortal.com/people/salieri.php">Antonio Salieri</a>
confessing his involvement in the death of Mozart. For you see, ever since
Antonio Salieri was a child he considered child prodigy Wolfgang Mozart to be his idol. As
he said, "He was my idol! I can't remember a time when I didn't know his name!" Antonio wanted
to be a great composer so desperately that he would pray to God to bring him the gift of
immortality through his music.
</p>
<p>Then one day, Salieri had the shock of his life when he realized that his idol 'Mozart'
was non-other than an obnoxious, immature, 'vulgar' man. "So that was he! That giggling,
dirty-minded creature I'd just seen crawling on the floor. Mozart. The phenomenon whose
legend had haunted my youth. Impossible."
</p>
<p>Salieri develops an overwhelming jealousy of Mozart's musical talent that eventually
grows into obsessive hatred. Salieri, a man who spent his entire life devoted to God so
that he could be a great composer has his talent overthrown by the childish Mozart. "Why?
Would God choose an obscene child to be His instrument?" Salieri vows to destroy Mozart, in
both name and body, in order to punish God for choosing Mozart as his instrument.
</p>
</div>
<div id="Footer">
Copyright © 2005 Qwerty. Design by
<a href="http://oswd.org/designs/search/designer/id/7724/">Gururaj</a>.
<!--<a href="http://openwebdesign.org/userinfo.phtml?user=kpgururaja">Gururaj</a>.-->
<a href="http://www.ehostinfo.com/">Web Hosting</a></div>
</div>
</body>
</html>
Related examples in the same category