Layout mit verschieden grossen Boxen

<?php get_header(); ?>    
    <div id="wrapper">
    
        <div id="logo">
        </div>
        
        <ul id="Navigation">
<li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
<?php  echo  preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i',  '<li$1><a$2><span>$3</span></a>',  wp_list_pages('echo=0&orderby=name&exclude=181&title_li=&depth=1'));  ?>
</ul>
         
         <div id="text">
         
             <div id="content">
                 <div class="top"></div>
                <div class="middle">
                <?php if (have_posts()) : ?><?php query_posts('category_name=Home'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<h1><a  href="<?php the_permalink() ?>" rel="bookmark" title="Link zu  <?php the_title(); ?>"><?php the_title();  ?></a></h1>
<?php the_content('Kompletten Beitrag lesen'); ?>
</div>
<div  class="infos">Geschrieben am <?php the_time('d.m.Y') ?> von  <?php the_author() ?> in <?php the_category(', ') ?>.  <?php comments_popup_link('0 Kommentare', '1 Kommentar', '%  Kommentare'); ?>. <?php edit_post_link('editieren','','·');  ?></div>
<?php endwhile; ?>
<?php next_posts_link('« vorherige Seite') ?> - <?php previous_posts_link('nächste Seite »') ?>
<?php else : ?>
<div class="post"> 
<h1>Fehler!</h1>
Die gewünschte Seite ist nicht verfügbar.
</div>
<?php endif; ?>
                </div>
                <div class="bottom"></div>             
             </div>
         
            <div id="box">
                <div class="top"></div>
                <div class="middle">
                    <h1>Design</h1>
                     <p>Ein frisches modernes Design ist zieht an! So  sehen die Kunden, dass Ihnen der Webauftritt wichtig ist. Auch kann es  dafür sorgen, dass Kunden länger auf Ihrer Website bleiben. Mir ist aber  wichtig, dass Ihr Inhalt im Vordergrund steht.
                    </p>
                </div>
                <div class="bottom"></div>
            </div>     
                
            <div id="box">
                <div class="top"></div>
                <div class="middle">
                    <h1>XHTML</h1>
                     <p>Sauber strukturiertes XHTML hilft bei der  Webseitenoptimierung. So wird Ihre Seite ganz oben bei Google angezeigt.  Mein XHTML Quelltext ist sauber und valide.
                    </p>
                </div>
                <div class="bottom"></div>
            </div>     
                
            <div id="box">
                <div class="top"></div>
                <div class="middle">
                    <h1>Webhosting</h1>
                     <p>Ich Hoste Ihre Website und melde die Domain  an. So können sie zurücklehnen und sich an Ihrer Website freuen
                </div>
                <div class="bottom"></div>
            </div>     
                
            <div id="box">
                <div class="top"></div>
                <div class="middle">
                    <h1>Analyse</h1>
                     <p>Damit ihre Webseite möglichst auf die Besucher  Optimiert wird, wird sie täglich anaysiert. Sie sehen, woher die  Besucher kommen, wie lange sie auf Ihrer Seite waren und und und
                    </p>
                </div>
                <div class="bottom"></div>
            </div>         
            
         </div>


    </div>






<?php get_footer(); ?>