Sidebar showing on the top of content bar

HTML & CSS
1

Hi,
I am in process of creating a simple theme from old tutorial with the html and css files enclosed. The issue is this the sidebar is showing on top of content.

HTML File:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title>Wrath Wordpress Theme</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<div id="wrapper" class="hfeed">
			<div id="header">
			<h1 id="blog-title"><a href="#" title="Wrath Wordpress Theme" rel="home">Blog Title</a></h1>
		<!-- <div id="blog-description"><?php bloginfo('description') ?></div> -->
	</div><!--  #header -->

	<div id="access">
		<div class="skip-link"><a href="#content" title="Skip navigation to the content">Skip to content</a></div>
	</div><!-- #access -->
	<!--<div style="clear:both"></div>-->
	<div id="about">
		<p class="message">
		<img src="/images/smallpotato.jpg" class="photo" alt="" />
		Hey! I am Small Potato. Thank you for using my theme, Wrath of the Seven Deadly Sins theme series. Edit this message and replace my photo within the header.php file. And yes...I am that pale, gotta keep geek tan.
		</p>
	</div>

	<div id="container">
		<div id="content">
			<div id="nav-above" class="navigation">
				<div class="nav-previous"></div>
				<div class="nav-next"></div>	
			</div>
			
			<div class="post">
				<h2 class="entry-title"><a href="#" title="">Hello Small Potatoes! How's my Tutorial?</a></h2>
				<div class="entry-date">August 07, 2007</div>
				<div class="entry-content">
				<p>Click anywhere on the canvas to start typing, preferrably near to the first column. What you want to do is stay within that column. That means estimating where you will hit the Enter key for line breaks.</p>

				<p>Click anywhere on the canvas to start typing, preferrably near to the first column. What you want to do is stay within that column. That means estimating where you will hit the Enter key for line breaks.</p>
				</div>
				<div class="entry-meta">
					By admin | Posted in Uncategorized | Comments (0)
				</div>
			</div><!-- End of div post -->

			<div class="post">
				<h2 class="entry-title"><a href="#" title="">Hello Small Potatoes! How's my Tutorial?</a></h2>
				<div class="entry-date">August 07, 2007</div>
				<div class="entry-content">
				<p>Click anywhere on the canvas to start typing, preferrably near to the first column. What you want to do is stay within that column. That means estimating where you will hit the Enter key for line breaks.</p>

				<p>Click anywhere on the canvas to start typing, preferrably near to the first column. What you want to do is stay within that column. That means estimating where you will hit the Enter key for line breaks.</p>
				</div>
				<div class="entry-meta">
					By admin | Posted in Uncategorized | Comments (0)
				</div>
			</div><!-- End of div post -->

			<div class="post">
				<h2 class="entry-title"><a href="#" title="">Hello Small Potatoes! How's my Tutorial?</a></h2>
				<div class="entry-date">August 07, 2007</div>
				<div class="entry-content">
				<p>Click anywhere on the canvas to start typing, preferrably near to the first column. What you want to do is stay within that column. That means estimating where you will hit the Enter key for line breaks.</p>

				<p>Click anywhere on the canvas to start typing, preferrably near to the first column. What you want to do is stay within that column. That means estimating where you will hit the Enter key for line breaks.</p>
				</div>
				<div class="entry-meta">
					By admin | Posted in Uncategorized | Comments (0)
				</div>
			</div><!-- End of div post -->
			<!-- comments template -->

			<div id="nav-below" class="navigation">
				<div class="nav-previous"></div>
				<div class="nav-next"></div>	
			</div>
		</div><!-- End of div content-->
		
		
		<div id="primary" class="sidebar">
		<ul class="xoxo">
		<li><h3 class="widgettitle">Recent Posts</h3>
		<ul>
				<li><a href="#">Hello world!</a></li>
				<li><a href="#">Template: Featured Image (Vertical)</a></li>
				<li><a href="#">Template: Featured Image (Horizontal)</a></li>
				<li><a href="#">Template: More Tag</a></li>
				<li><a href="#">Template: Excerpt (Defined)</a></li>
				</ul>
		</li>

		<li><h3 class="widgettitle">Recent Comments</h3>
			<ul>
				<li><a href="#">Hello world!</a></li>
				<li><a href="#">Page with comments</a></li>
				<li><a href="#">Page with comments</a></li>
				<li><a href="#">Page with comments</a></li>
			</ul>
		</li>

		<li><h3 class="widgettitle">Categories</h3>
			<ul>
				<li><a href="#" title="#">Edge Case</a></li>
				<li><a href="#" title="#">Post Formats</a></li>
				<li><a href="#" title="#">Template</a></li>
				<li><a href="#">Uncategorized</a></li>
			</ul>
		</li>
		</ul>
	</div>
		
		<div id="secondary" class="sidebar">
		
		<ul class="xoxo">
			<li><h3 class="widgettitle">Categories</h3>
		<ul>
			<li><a href="#" title="">Edge Case</a></li>
			<li><a href="#" title="">Post Formats</a></li>
			<li><a href="#" title="">Template</a></li>
			<li><a href="#">Uncategorized</a></li>
		</ul>
		</li>
		
		<li><h3 class="widgettitle">Archives</h3>
		<ul>
			<li><a href="#">September 2016</a></li>
			<li><a href="#">March 2012</a></li>
			<li><a href="#">October 2010</a></li>
			<li><a href="#">September 2010</a></li>
			<li><a href="#">August 2010</a></li>
			<li><a href="#">July 2010</a></li>
			<li><a href="#">June 2010</a></li>
			<li><a href="#">May 2010</a></li>
			<li><a href="#">April 2010</a></li>
			<li><a href="#">March 2010</a></li>
			<li><a href="#">February 2010</a></li>
			<li><a href="#">January 2010</a></li>
			<li><a href="#">May 2009</a></li>
		</ul>
		</li>
			<li id="meta-2" class="widget widget_meta"><h3 class="widgettitle">Meta</h3>
			<ul>
				<li><a href="#">Log in</a></li>
				<li><a href="#">Entries <abbr title="#">RSS</abbr></a></li>
				<li><a href="#">Comments <abbr title="#">RSS</abbr></a></li>
				<li><a href="#" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li>			
			</ul>
			</li>
		</ul>
	</div>

	</div><!--End of div container-->
	<div id="footer">
		<span id="generator-link"><a href="http://wordpress.org/" title="WordPress" rel="generator">WordPress</a></span>
		<span class="meta-sep">|</span>
		<span id="theme-link">Using <a href="http://www.wpdesigner.com/2007/07/20/wrath-wordpress-theme/" rel="designer" title="Wrath">Wrath</a>, based on <a href="http://www.plaintxt.org/themes/sandbox/" title="Sandbox for WordPress" rel="designer">Sandbox</a></span>
	</div>


	</div><!-- End of wrapper -->
</body>
</html>

CSS FILE:

body, h1, h2, h3, h4, h5, h6, abbr, acronym, address, blockquote, dd, dl, form, p{
	margin: 0;
	padding: 0;
}

body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background: #ededed;
	color: #000;
}

a{
	text-decoration: underline;
	color: #c00;
}

a:hover{
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6{
	font-weight: normal;
}

form, textarea{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

address, dl, p, div.page-link, div.entry-content h1, div.entry-content h2, div.entry-content h3, div.entry-content h4, div.entry-content h5, div.entry-content h6{
	padding: 15px 0 5px;
}

blockquote{
	margin: 10px 0 0;
	border-top: 1px solid #ddd;
	background: #f7f7f7;
}

blockquote p{ padding: 15px 10px; }

blockquote blockquote{
	margin: 0 10px;
	background: #fff;
}

dd{
	padding: 0 0 0 20px;
}

p img{
	max-width: 100%;
}

img.centered{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.alignright{
	padding: 4px;
	margin: 3px 0 2px 10px;
	display: inline;
}

img.alignleft{
	padding: 4px;
	margin: 3px 10px 2px 0;
	display: inline;
}

.alignleft{float: left;}

.alignright{float: right;}

div#wrapper{
	width: 980px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	background: #fff url(images/bg_body.gif) repeat-y center top;
}

div#header{
	float: left;
	width: 980px;
	border-top: 5px solid #000;
	border-bottom: 1px solid #ededed;
	padding: 7px 0 8px;
	background: #fff;
}

div#header h1{
	margin: 0 120px 0 0;
	padding: 0 10px;
	font-family: Georgia, Arial, Helvetica;
	font-size: 18px;
	line-height: 36px;
}

div#header h1 a{
	color: #000;
}

div#header h1 a:hover{
	border: 0;
}




div#access div.skip-link{
	float: right;
	margin: -34px 10px 0;
	display: inline;
	font-family: Georgia, Arial, Helvetica;
}

div#access div.skip-link a{
	color: #777;
}

div#access div.skip-link a:hover{
	color: #000;
}

div#menu{
	float: left;
	width: 980px;
	border-bottom: 1px solid #ccc;
	padding: 0 0 13px;
	background: #fff;
}

div#menu ul,div#menu ul ul,div#menu ul li{
	list-style:none;
	margin:0;
	padding:0;
}

div#menu ul li{
	float: left;
	margin: 12px 10px 0;
	display: inline;
	font-family: Georgia, Arial, Helvetica;
	font-size: 14px;
}

div#menu ul a{
	color: #777;
}

div#menu ul a:hover{
	color: #000;
}

div#menu li ul{
	display: none;
	position: absolute; 
	top: 1em;
	left: 0;
	clear: left;
}

div#menu li:hover ul, li.over ul { display: block; }

div#menu li > ul {
	top: auto;
	left: auto;
}

div#menu ul ul li{}

div#menu ul ul li a{}

div#menu ul li:hover ul{}

div#menu ul li:hover ul li a{}




div#about{
	float: left;
	width: 980px;
	border-top: 1px solid #5f0000;
	border-bottom: 1px solid #5f0000;
	padding: 0 0 29px 0;
	background: #c00 url(images/bg_about.gif) repeat-x left bottom;
	
}

div#about a{
	color: #000;
}

div#about p.message{
	padding: 20px 20px 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 36px;
	color: #fff;
}

div#about img.photo{
	float: left;
	margin: 0 15px 0 0;
}




div#container{
	float: left;
	width: 980px;
	border-top: 5px solid #000;
}

div#content{
	float: left;
	width: 488px;
}




div.post, div.page{
	padding: 14px 20px 15px;
}

div#nav-above{
	margin: 10px 10px 0; 
}
div#nav-below{
	 margin: 10px;
}

div.navigation{
	border-top: 1px solid #e0dcb8;
	padding: 5px 10px 6px;
	background: #fdfbe7 url(images/bg_navigation.gif) repeat-x left bottom;
	line-height: 24px;
}

div.navigation a{
	text-decoration: none;
	border-bottom: 1px dotted #c00;
}

h2.entry-title, h3.entry-title{
	font-family: Georgia, Arial, Helvetica;
	font-size: 24px;
}

h2.page-title{
	margin: 10px 10px 0;
	border-top: 1px solid #dfdfdf;
	padding: 8px 10px 9px;
	font-family: Georgia, Arial, Helvetica;
	font-size: 16px;
	font-weight: bold;
	background: #f8f8f8 url(images/bg_sidebar_h3.gif) repeat-x left bottom;
	color: #666;
}

h2.entry-title a, h3.entry-title a{
	color: #000;
}


div.entry-date{
	padding: 16px 0 0 10px;
	color: #666;
}

div.entry-content{
	line-height: 24px;
}

div.entry-content h1{
	font-size: 30px;
	line-height: 36px;
}

div.entry-content h2{
	font-size: 24px;
	line-height: 30px;
}

div.entry-content h3{
	font-size: 18px;
}

div.entry-content h4{
	font-size: 16px;
}

div.entry-content h5{
	line-height: 15px;
}

div.entry-content h6{
	line-height: 12px;
}

div.entry-meta{
	padding: 10px 0 0;
	line-height: 24px;
}




div#comments{
	margin: 0 10px 10px;
	padding: 0 10px 10px;
	border-top: 1px solid #dfdfdf;
	background: #fcfcfc;
}

div#comments h3{
	font-family: Georgia, Arial, Hevletica;
	font-size: 24px;
	padding: 10px 0 5px;
}

div#comments p{
	padding: 10px 0 5px;
	line-height: 24px;
}

div#comments ol , div#comments ol li{
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 24px;
}

div#comments ol{
	padding: 0 0 10px;
}

div#comments ol li{
	padding: 10px 0 10px;
	background: url(images/bg_sidebar_h3.gif) repeat-x left bottom;
}

div.comment-meta{
	font-size: 11px;
}

div.nopassword{
	padding: 10px 0 0;
	line-height: 24px;
}

form#commentform span.required{
	background: #fff;
	color: #f00;
}

form#commentform .form-label, form#commentform .form-textarea{
	margin: 10px 0 0;
}

input#author,input#email,input#url{width:50%;}

input#author,input#email,input#url,textarea#comment{padding:0.2em;}

textarea#comment{height:13em;margin:0 0 0.5em;overflow:auto;width:66%;}





div.sidebar{
	float: left;
	width: 245px;
	display: inline;
}

div.sidebar a{
	color: #900000;
}

div#primary{
	margin: 5px 0 0 -491px;
}

div#secondary{
	margin: 5px 0 0 -245px;
}

div.sidebar ul, div.sidebar ul li{
	list-style: none;
	margin: 0;
	padding: 0;
}

div.sidebar ul{
	margin: 0 0 10px;
}

div.sidebar ul li{
	padding: 10px 10px 0;
}

div.sidebar ul li#search form#searchform{
	margin: 0;
	padding: 10px 10px 0;
}

div.sidebar ul li h3{
	border-top: 1px solid #dfdfdf;
	padding: 8px 10px 9px;
	font-family: Georgia, Arial, Helvetica;
	font-size: 16px;
	font-weight: bold;
	background: #f8f8f8 url(images/bg_sidebar_h3.gif) repeat-x left bottom;
}

div.sidebar ul ul{
	margin: 0;
	padding: 6px 10px 0;
	line-height: 24px;
}

div.sidebar ul ul li{
	padding: 0;
}

div.sidebar ul ul ul{
	padding: 0 0 0 10px;
}

div.sidebar input#s{width: 120px;}*/

/* Start Widget Styles */

div#calendar_wrap{
	padding: 10px;
}

table#wp-calendar{
	width: 100%;
}

table#wp-calendar th, table#wp-calendar td{
	padding: 10px 0 0;
}

div.sidebar ul li#google-search form#gsearch{
	padding: 5px 10px 10px;
	text-align: left;
}

/* End Widget Styles */




div#footer{
	clear: both;
	width: 980px;
	padding: 12px 0;
	border-top: 5px solid #000;
	text-align:center;
	font-size: 11px;
	line-height: 18px;
	background: #ededed;
}

div#footer a{
	text-decoration: none;
}

Please help.

Thanks
S

2

Hi,
The issue is resolved. I have wrongly closed a div due to which this is coming up.

Thanks
ST

4 Likes
3

You shouldn’t be using this doctype for new web pages - it indicates that the page still contains HTML 3.2 tags that were flagged for removal from HTML back in 1997 but that you haven’t yet got around to converting to their HTML 4 equivalent.

4

Hello Felgall,
Thanks I appreciate for the guidance.

Regards
ST

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.