Positioning Posts Individually

Sounds like you want the first (latest) post to be full width with the 4 below it in a row with only the image and an excerpt.

If that is the case, you can use a counter in the loop to set the proper divs to arrange the posts like that.

The code should look something like this:

<?php if (have_posts()) :
   while (have_posts()) : the_post();
     if (++$c == 1) {
       echo '<div class="fullwidth">';
     } elseif (($c -1 ) % 4 == 1) {
       echo '<div class="newrow">';
       echo "<div class='$postclass'>";
     } else {
       echo "<div class='$postclass'>";
     }
     // Code here to display a post
     echo '</div><!-- End of post -->';
     if ($c > 1 && ($c - 1) % 4 == 0) {
        echo '</div><!-- End of row -->';
     }
   endwhile;
   if ($c > 1 && ($c - 1) % 4 != 0) {
      echo '</div><!-- End of row -->';
   }
else :
   // Code here for no posts found
endif;
?>

Then, set up the CSS for fullwidth, newrow, and postclass.

Hello thanks for replying, I tried using the code you gave me customising it a bit and so on. However I have tried numerous times to get this to work and I just can’t seem to get it to. Is there no other way of doing this? I wanted it to look something like this :
Click Here

Thanks again.

The code I gave works to set up the div’s. You can see where I tested it in this screen shot (after I changed the posts per row to 3 per your sample).

The code and CSS:

<style>
.fullwidth { width: 98%; border: 2px solid black; }
.newrow { width: 98%; }
.postclass {width: 30%; float: left; margin: 4px; border: 2px solid green; }
</style>
<?php

// This code shows how to use a counter to show the first post full width
// with the remaining ones 3 to a row.
   echo '<h2>Testing rows</h2>';
   $postclass = 'postclass';
   for ($i=1;$i<12;++$i) {
     if (++$c == 1) {
       echo '<div class="fullwidth">';
     } elseif (($c -1 ) % 3 == 1) {
       echo '<div class="newrow">';
       echo "<div class='$postclass'>";
     } else {
       echo "<div class='$postclass'>";
     }
     echo "A post goes here. c is $c";
     echo '</div><!-- End of post -->';
     if ($c > 1 && ($c - 1) % 3 == 0) {
        echo '</div><!-- End of row -->';
     }
   }
if ($c > 1 && ($c - 1) % 4 != 0) {
  echo '</div><!-- End of row -->';
}

?>

Perhaps I am getting this wrong, where exactly must this code be placed. I have tried it both in the loop.php file along with the page.php file.
Thanks for the code though, I am sure it will be much useful when i get it working. ??

The part of code within my loop file that gets the results is this:

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

<?php?>

	<?php else : ?>
	<div id="maincontent">
	<br>
<div id="posttitle">
			<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
</div>
<div id="postdate">
		<?php twentyten_posted_on(); ?>
</div>

	<?php if ( is_archive() || is_search() ) :  ?>
			<?php the_excerpt(); ?>
	<?php else : ?>
		<?php the_content( __( 'Continue reading &rarr;', 'twentyten' ) ); ?>
			<?php wp_link_pages( array( 'before' => '' . __( 'Pages:', 'twentyten' ), 'after' => '' ) ); ?>
	<?php endif; ?>
	</div>

				<?php if ( count( get_the_category() ) ) : ?>
				<?php endif; ?>
				<?php
					$tags_list = get_the_tag_list( '', ', ' );
					if ( $tags_list ):
				?>
					<?php printf( __( 'Tagged %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>
				<?php endif; ?>
		<?php comments_template( '', true ); ?>
	<?php endif; ?>

<?php endwhile; ?>

Whilst my page.php file consists of:

<?php
get_header(); ?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<style>
					<?php if ( is_front_page() ) { ?>
						<h2><?php the_title(); ?></h2>
					<?php } else { ?>
						<h1><?php the_title(); ?></h1>
					<?php } ?>
                    <?php the_content(); ?>
<?php endwhile; ?>

<?php get_footer(); ?>

I probably should have stuck to normal web design ??

The twentyten theme is not the easiest to modify for that. You might be better off starting with a theme that uses a ‘Featured Post’, but here goes. Back up loop.php and change as follows.

Change this:

<?php /* How to display all other posts. */ ?>

	<?php else : ?>
?>
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

to this:

<?php /* How to display all other posts. */ ?>

	<?php else : ?>
<?php // Code to have wide first post, then rows under it.
$posts_per_row = 3;  // The number of posts on rows after first.
if (++$c == 1) {
   echo '<div class="fullwidth">';
} elseif (($c - 1) % $posts_per_row == 1) {
   echo '<div class="newrow">';
   echo '<div class="narrowpost">';
} else {
   echo '<div class="narrowpost">';
}
?>
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Change this;

</div><!-- .entry-utility -->
		</div><!-- #post-## -->

		<?php comments_template( '', true ); ?>

to this:

</div><!-- .entry-utility -->
		</div><!-- #post-## -->
   </div><!-- End fullwidth or narrowpost -->
   <?php if ($c > 1 && ($c - 1) % $posts_per_row == 0) {
       echo '</div><!-- End of row -->';
   } ?>
		<?php comments_template( '', true ); ?>

Change this:

<?php endwhile; // End the loop. Whew. ?>

<?php /* Display navigation to next/previous pages when applicable */ ?>

to this:

<?php endwhile; // End the loop. Whew. ?>
<?php
if ($c > 1 && ($c - 1) % 4 != 0) {
  echo '</div><!-- End of row -->';
} ?>

<?php /* Display navigation to next/previous pages when applicable */ ?>

And use CSS similar to this:

.fullwidth {
   width: 98%;
   border: 2px solid black;
}
.newrow {
   width: 98%;
}
.narrowpost {
   width: 30%;
   float: left;
   margin: 4px;
   border: 2px solid green;
}

I think I am going to have to take a different approach to doing this, because it’s really not working for me, I might just start again or build on top of another theme. The code looks right to me, and I can see you got it working yourself.
Thanks for your help though vtxyzzy, seriously I appreciate it a lot.

I have found a theme now, which im just going to use the foundations of and strip away the rest of the stuff.
So like I said, thank you very much for all your help and trying to help me. ??

You are welcome. Glad you found something that works.