css divs aren't floating in alignment - html

Question

Hi i have coded my news content of my wordpress blog, i made the content float right and the date and comments float left of the conten, now it is floating perfectly except for one thing.
The date and comments for the first post is aligned but the date and comments for the second post is also aligned with the first post, when it should be aligned with the second post. and the date and comments under the second post is suppose to be for the third post, which leaves the last post without date time or comments. Example below.
here is my css
#content {
width: 1070px;
}
.right{
position:relative;
float:right;
right:215px;
}
.left{
position:relative;
float:left;
left:200px;
display:block;
}
.date{
width:80px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
clear:left;
}
.month {
color:#fff;
font-size:15px;
font-family:eurofurence;
text-transform:uppercase;
}
.year {
color:#fff;
padding:0 0 7px 0;
font-size:30px;
font-family:eurofurence;
text-transform:uppercase;
}
.commentbubble{
background: url('http://bleedartmedia.com/mock/wp-content/themes/KellyRowland/images/commentb.png') no-repeat;
width:40px;
height:49px;
padding:4px 0 0 14px;
}
.entry {
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 10px;
border-bottom: 0px solid #cccccc;
font-family:eurofurence;
font-size:17px;
width:610px;
background:#000;
}
.entry-top {
margin: 0 0 0px 0;
padding: 0 0 0px 0;
text-align: left;
}
.entry-top .entry-title {
color: #fff;
font-family:eurofurence light;
font-size:28px;
}
.entry-top .entry-author {
font-style: italic;
}
.entry-title {
margin: 0;
padding: 0;
font-size: 1.3em;
font-weight: bold;
line-height: normal;
font-stretch: narrower;
}
.entry-title a:link,
.entry-title a:visited {
color: #fff;
font-family:eurofurence light;
font-size:28px;
}
.entry-title a:hover {
color: #3E7AB9;
text-decoration: none;
}
.entry-content {
margin: 10px 0 10px 0;
padding: 0px 10px 10px 10px;
font-family:eurofurence;
font-size:17px;
}
and here is my coding
<div id="content">
<?php while ( have_posts() ) : the_post() ?>
<div class="date left">
<div class='month'><?php the_date('M');?></div>
<div class='year'><?php the_time('d');?></div>
<div class="commentbubble">
<?php comments_popup_link( __( '0', 'wpbx' ), __( '1', 'wpbx' ), __( '%', 'wpbx' ) ) ?>
</div>
Comments
</div>
<div class="entry right">
<div class="entry-top">
<h2 class="entry-title"><?php the_title() ?></h2>
</div>
<div class="entry-content clearfix">
<div class="entry-content">
<div id="text"><?php the_content() ?></div>
</div>
</div>
<div class="entry-meta">
</div>
</div><!-- .post -->
<br>
<?php endwhile; ?>
</div><!-- #content -->
Anyone have a solution

Answer 1

I'm guessing your php while loop starts outside of the shown html? What I would do here is make sure that you contain your date-left and entry-right in a single div, and use the php while to repeat the div. I think all you'll have to do is find where your while loop starts, add a div, and then right before it ends add a closing div.
<loop start>
<div>
....(divs containing entry and date here)
</div>
<loop end>

Answer 2

Try adding this to clear the float:
.date.left { clear: left; }