Hi all,

 

My Wordpress theme looks like this.

 

The 'wrapper' class keeps all text and images (including the header) within 960px. I want to apply CSS to all content below the header and within 960px. No div currently exists that encloses this area (ie content div, sidebar div and footer div) so I think I need to create it. The area of this new div would like the yellow here.

 

So I think I need to add a div to index.php. I have tried a few things that don’t work. For example I enclosed the entire index.php except <?php get_header(); ?> in...

<div id=”new_div”>

...</div>

 

 

...but as you can see here (new_div in yellow) it doesn’t work (only a short bit enclosed and unhelpfully moves the sidebar).

 

Any suggestions please??

 

Thank you

 

 

 

index.php (including new_div added by me) =

 

<?php get_header(); ?>

<div id="new_div"> 

   <?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?>
   <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
       <div class="post-header">
           <div class="date"><?php the_time(__ ( 'M j', 'titan')); ?> <span><?php the_time( 'y' ); ?></span></div>
           <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
           <div class="author"><?php printf(__ ( 'by %s', 'titan'), get_the_author()); ?></div>
       </div><!--end post header-->
       <div class="entry clear">
           <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail( array(250,9999), array( 'class' => ' alignleft border' )); ?>
           <?php the_content(__( 'read more...', 'titan')); ?>
           <?php edit_post_link(__( 'Edit', 'titan')); ?>
           <?php wp_link_pages(); ?>
       </div><!--end entry-->
       <div class="post-footer">
           <div class="comments"><?php comments_popup_link(__ ( 'Leave a comment', 'titan'), __ ( '1 Comment', 'titan'), __ngettext ( '% Comment', '% Comments', get_comments_number (),'titan')); ?></div>
       </div><!--end post footer-->
   </div><!--end post-->
   <?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
   <div class="navigation index">
       <div class="alignleft"><?php next_posts_link(__ ( '« Older Entries', 'titan')); ?></div>
       <div class="alignright"><?php previous_posts_link(__ ( 'Newer Entries »', 'titan')); ?></div>
   </div><!--end navigation-->
   <?php else : ?>
   <?php endif; ?>
</div><!--end content-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

</div>

Add a new container (div wrapper) inside the current wrapper, float it left and use that instead.

 

You want the nested wrapper to float left and as you're using margin:auto; to centre the first wrapper you can't use a float with it.