Showing content from WordPress ruins page CSS using WP_Query, without, content does not show

I suppose I have a two pronged issue here.
I’m trying to show wordpress posts on my own site. I have a page where people can view the list of articles, then when they click on one it takes them to the article page (I replaced the standard index.php with my own template so that the post shows how I want it to). On this page, however, is where the problem begins.

Problem One

When using

<? if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
the content is displayed, but it evidentally messes with the CSS as things get moved out of place. However…

Problem Two

Somehow or another, when I tried without the wp_query, the page still showed the correct post title, but no content.

Is there a way to either – a. get the wp_query to stop messing with my css OR b. get the content without wp-query, much like I managed to get the title.

Any help would be appreciated. Cheers!

Not sure you’ll need it, but here’s the loop used to display the list of posts on ‘news’ before clicking and being directed to ‘article’

<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args=array(
   'post_type'=>'post',
   'posts_per_page' => 7,
   'paged'=>$paged
);
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query($args);


/* PageNavi at Top */
if (function_exists('wp_pagenavi')){wp_pagenavi();}
if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post();   
?>
<div class="clearfix colelem" id="pu6783"><!-- group -->
       <div class="museBGSize grpelem" id="u6783"><!-- simple frame --></div>
       <div class="clearfix grpelem" id="pu6785"><!-- column -->
        <div class="clearfix colelem" id="u6785"><!-- group -->
         <div class="clearfix grpelem" id="u6786-4"><!-- content -->
          <p id="u6786-2"><span id="u6786"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></span></p>
         </div>
        </div>
        <div class="clearfix colelem" id="u6784-4"><!-- content -->
         <p><?php the_excerpt(); ?><a href="<?php the_permalink() ?>">...[Read More]</a></p>
        </div>
       </div>
      </div>
      <div class="colelem" id="u6781"><!-- simple frame --></div>
<?
endwhile; endif;
/* PageNavi at Bottom */
if (function_exists('wp_pagenavi')){wp_pagenavi();}
$wp_query = null;
$wp_query = $temp;
wp_reset_query(); ?>

And in case it is needed, here is the block of code on ‘article’

<? if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post();   ?>

     <div class="shadow clearfix grpelem" id="u4483"><!-- group -->
      <div class="clearfix grpelem" id="pu4645"><!-- column -->
       <div class="clearfix colelem" id="u4645"><!-- group -->
        <div class="clearfix grpelem" id="u4646-4"><!-- content -->
         <p id="u4646-2"><span id="u4646"><?php the_title(); ?></span></p>
        </div>
       </div>
       <div class="museBGSize colelem" id="u4643"><!-- simple frame --></div>
       <div class="clearfix colelem" id="u4620-4"><!-- content -->
        <p id="u4620-2"><span id="u4620"><?php the_title(); ?></span></p>
       </div>
       <div class="clearfix colelem" id="u4642-4"><!-- content -->
        <p id="u4642-2"><span id="u4642"></span></p>
       </div>
       <div class="clearfix colelem" id="u4644-4"><!-- content -->
            <p><?php the_content(); ?></p>
       </div>
       </div>
       <div class="colelem" id="u5632"><!-- custom html -->
<? endwhile; endif; ?>

Before you ask, yes the page is loading wp-blog-header, AND wp-load 🙂