Sidebar Displaying Below Content

Start by validating your theme’s output.

As expected I have errors. I know the base HTML and CSS from the sliced image is correct because that validates. I dont know where to start with these errors though. Is there a simpler way to handle the loop in 3.0, I feel like the problem is Im jumping into something that has way too many features for what I need so its twice as hard to trouble shoot.

Ok so I’ve done some playing around, ditched the standard loop and started scratch, basically copying how it would have been done prior to the 3.0 version. The main content, header, and footer are set-up exactly how they should be and the content is leaving enough room for a sidebar. The sidebar however still wants to display underneath it. If I use the HTML/CSS alone, outside of wordpress is works perfectly but not here. I’ll post the code below.

Loop

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

		<div class="wrapper">
			<div class="content">
					<div class="main_content">
						<div class="post">
							<span class="post_title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></span>
								<div class="post_info">
									<p>Posted <?php echo get_the_date(); ?> by <?php the_author(); ?> </p>
									<p>File Under: <?php the_category(', '); ?></p>
								</div>
						<div class="post_content">
							<div class="post_img"><?php the_post_thumbnail(); ?></div>
							<div class="post_txt">
								<?php the_content() ?>
							</div>
						</div> <!--end of post_content-->

						<div class="post_bar"><a href="<?php the_permalink(); ?>"><?php comments_number('No Comments','One Comment','% Comments'); ?>, Read More</a></div>
						</div> <!--end of post-->
					</div>
			</div>
		</div>

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Sidebar.php

<div class="wrapper">
		<div class="content">
			<div class="main_content">
				<div class="sidebar">
					<form action="#" class="subscribe_form">
					<fieldset>
						<div class="subscribe_title"><a href="#">Subscribe now</a></div>
						<div class="subscribe_box">

							<input type="text" class="input_email" />
							<input type="submit" value=" " class="input_submit" />
						</div>
						</fieldset>
						</form> <!--end of subscribe_form-->

						<div class="sidenav">
							<div class="sidenav_title">Archives</div>
							<ul>
								<?php wp_get_archives('type=monthly'); ?>
							</ul>
						</div>

						<div class="sidenav">
							<div class="sidenav_title">Categories</div>
							<ul>
								<?php wp_list_categories('show_count=1&title_li='); ?>
							</ul>
						</div>

				</div> <!--end of sidebar-->
			</div>
		</div>
	</div>

CSS

[CSS moderated as per the Forum Rules. ]

So I’ve since done more stuff and now the only validation error I get is:

Line 53, Column 26: there is no attribute "role"

		<div id="content" role="main">

?

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

Yet the sidebar still isn’t correct. Whats up with that?

And I’ve since fixed that also. The site output all validates yet the sidebar still displays below the footer in firefox. I dont get this. Im not familiar with how wordpress handles content vs. sidebar but if there’s enough room for the sidebar and its a separate file, why isn’t it floating to the top?