I've nearly finished a theme for Wordpress for my blog, but I've hit one final snag. The page loads strangely, rendering the content before the containing div shows up beneath it. Sort of as if the content were spilling out of the div it resides in. Once the page has loaded, it displays appropriately, however, for people with slower connections the strange load sequence will look awful.

I figured out that the problem was due to some floats that weren't being cleared properly. Trouble is, when I clear the floats, the sidebars will no longer rest next to the main content, they're shifted down instead, but still floating to the right.

Here's the staging page:
http://www.petruzzo.com/staging/wp/

Here's the markup for the main template page:

Code:
<div id="mpage">

	<div id="content">
    	
			<?php if (have_posts()) : ?>
            
            <?php while (have_posts()) : the_post(); ?>
                <span class="post" id="post-<?php the_ID(); ?>">
                    
                    <div class="post">
                        
                        <div class="title">
                            <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
                    	</div>
                    
                        <div class="postdata">
                            <span class="date"><span class="author">Posted by <?php the_author() ?> on</span> <?php the_time('M d, Y') ?> <?php edit_post_link(__('Edit')); ?>&nbsp;//&nbsp;</span>
                            <span class="category"><?php the_category(', ') ?></span>
                        </div>
                    
                        <div class="entry">
                                <?php the_content('Read the rest of this entry &raquo;'); ?>
                            <span class="comments"><?php comments_popup_link('Leave a comment! ', 'Just 1 comment so far!', '% Comments so far, join the discussion!'); ?></span>
                        </div>
                                      					
						<?php the_tags( '<p>Tags: ', ', ', '</p>'); ?>
                    
                    </div>
                    
            <?php endwhile; ?>
        
        
              <div class="navigation">
                      <div class="alignleft"><?php next_posts_link('Older Posts') ?></div>
                      <div class="alignright"><?php previous_posts_link('Newer Posts') ?></div>
              <div class="clear"></div>
              </div>
	
        
		  <?php else : ?>
      
                  <h2 class="t-center">Not Found</h2>
                  <p class="t-center">Sorry, but you are looking for something that isn't here.</p>
  
          <?php endif; ?>
        
    </div>
            
    <div id="sidebars">

                  <div class="sbar1">
                  <?php include(TEMPLATEPATH."/sidebar1.php");?>
                  </div>
              
                  <div class="sbar2">
                  <?php include(TEMPLATEPATH."/sidebar2.php");?>
                  </div>
              
    </div>
    <div class="clear"></div>
</div>
If you pull up the CSS, #content and #sidebars should float next to one another and they do, provided the floats are not cleared. But then the page loads weird. If they're cleared, they won't sit together.

I've been combing through looking for something that I know is wrong, but I just can't find it.

I'm hoping someone can give me a hand with this.