Order author divs from left to right by most recent post

hippievstony.com

hey so right now my site consists of a bunch of vertical divs, one per author, with their posts running down the page chronologically. I am trying to figure out how to automatically sort the divs by newest post ie hippie just posted, then his div should be all the way to the left, followed by the div with the next newest post. Any ideas? Here is my index.php:

<?php
get_header ();
?>
<div id="box">

<div id="one">
     <img src="https://www.hippievstony.com/wp-content/uploads/2009/11/tonyname.jpg"
     <?php $my_query = new WP_Query ( 'author_name=tony' );
     while ( $my_query->have_posts () ) :
        $my_query->the_post () ?>

        <div class="post">
        <h3>
        <a href="<?php the_permalink ();?>"><?php the_title ();?></a>
        </h3>
            <div class="entry">
                <?php the_content ();?>
            </div><!-- end entry div -->    

                   <?php $withcomments = 1; ?>
                   <?php comments_template(); ?>
            </div><!-- end post div -->
<?php
endwhile;/*end tony while have posts*/

?>
    </div><!-- End one Div -->

    <div id="two">
    <img src="https://www.hippievstony.com/wp-content/uploads/2009/11/hippiename.jpg"
    <?php
    $my_query = new WP_Query ( 'author_name=hippie' );
    while ( $my_query->have_posts () ) :
        $my_query->the_post () ?>

        <div class="post">
        <h3>
        <a href="<?php the_permalink ();?>"><?php the_title ();?></a>
        </h3>
            <div class="entry">
                <?php the_content ();?>
            </div><!-- end entry div -->

            <?php $withcomments = 1; ?>
            <?php comments_template(); ?>

        </div><!-- end post div -->
<?php
endwhile;/*end hippie while have posts*/

?>
    </div><!-- End two Div -->

<div id="three">
    <img src="https://www.hippievstony.com/wp-content/uploads/2009/11/erikuname.jpg"
    <?php
    $my_query = new WP_Query ( 'author_name=eriku' );
    while ( $my_query->have_posts () ) :
        $my_query->the_post () ?>

        <div class="post">
        <h3>
        <a href="<?php the_permalink ();?>"><?php the_title ();?></a>
        </h3>
            <div class="entry">
                <?php the_content ();?>
            </div><!-- end entry div -->

            <?php $withcomments = 1; ?>
            <?php comments_template(); ?>

        </div><!-- end post div -->
<?php
endwhile;/*end eriku while have posts*/

?>
    </div><!-- End three Div -->

<div id="four">
    <img src="https://www.hippievstony.com/wp-content/uploads/2009/11/benname.jpg"
    <?php
    $my_query = new WP_Query ( 'author_name=ben' );
    while ( $my_query->have_posts () ) :
        $my_query->the_post () ?>

        <div class="post">
        <h3>
        <a href="<?php the_permalink ();?>"><?php the_title ();?></a>
        </h3>
            <div class="entry">
                <?php the_content ();?>
            </div><!-- end entry div -->

            <?php $withcomments = 1; ?>
            <?php comments_template(); ?>

        </div><!-- end post div -->
<?php
endwhile;/*end ben while have posts*/

?>
    </div><!-- End four Div -->

</div><!-- end box div -->
<?php
get_sidebar ();
get_footer ();
?>

and my style.css:

/*
Theme Name: Duel
Theme URI: hippievstony.com
Description: Side-By-Side Comparison Blog Mayhem
Version: 1.0
Author: tony+mostly rincewind456
Author URI: https://www.hippievstony.com

*/

#one{
     float: left;
     width: 400px; 

     }

#two{
     float: left;
     width: 400px;
     padding-left:15px;
     }

#three{
     float: left;
     width: 400px;
     padding-left:15px;
     }

#four{
     float: right;
     width: 400px;
     padding-left:15px;
     padding-right:15px;
     }

body{
	margin: 0;
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 12px;
	text-align: left;
	vertical-align: top;
	background: #ffffff;
	color: #000000;
}

a:link, a:visited{
	text-decoration: underline;
	color: #336699;
}

a:hover{
	text-decoration: none;
}

#wrapper{
	margin: 0 auto 0 15px;
	width: 1900px;
	text-align: left;
}

#header{

	width: 1900px;
        height: 545px;
        background: url(https://www.hippievstony.com/wp-content/uploads/2009/11/headerpic.jpg) no-repeat;
        padding-left:0px;
        }

#box{
	float: left;
	width: 1660px;
}

.sidebar{
	float: right;
	width: 200px;
	background: white;
	margin: 200px 0 0 0px;
	display: inline;
}

h2 {font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 110%; color: black; font-weight: bold; }

#sidebar h2 {font: font-size: 85%; color: black; background: transparent;
       font-weight: bold; border-bottom: dashed 2px yellow; }

#sidebar ul {
            margin-left: 20em;
            }

#sidebar ul li ul{
        margin-left: 3.5em;
               }

#footer{
	clear: both;
	margin: auto;
	width: 100%;
        text-align: center;
}

img
{
border:0;
}

.comments-template{
	margin: 10px 0 0;
	border-top: 1px solid #ccc;
	padding: 0px 0 0;
}

.comments-template ol{
	margin: 0;
	padding: 10 0 15px;
	list-style: none;
}

.comments-template ol li{
	margin: 10px 0 0;
	line-height: 18px;
	padding: 0 0 0px;
	border-bottom: 1px solid #ccc;
}

.comments-template h2, .comments-template h3{
	font-family: Georgia, Sans-serif;
	font-size: 16px;
}

.commentmetadata{
	font-size: 12px;
}

.comments-template p.nocomments{
	padding: 0;
}

.comments-template textarea{
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 12px;
}

thanks for any ideas!

tony