The Div content does not harmonize properly, can anyone help me solve this problem?

advertisements

Hi so i have set my divs to float, to the right is the worpress news content and to the left is the date and comment bubble the only problem is the date for the second post is beside the date with the first post and i don't know why this is.

See how the date aligns with the first date, it's not suppose to be there, it's suppose to be aligned with the post below and the date on the post below is suppose to be align with the third post, below 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;
}

.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 the the 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 -->

Can anyone help me fix this


Add

.entry:after {
    clear: both;
}