Question

I’m getting error because my divs won’t float at all

Here is my css

#content {
width: 1070px;
}

.date{
float:left;
width:80px;
margin: 50px 8px 0px -60px;
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 {
    float:right;
margin: 0px 8px 0px 0px;
padding: 20px 0px 0px 0px;
border-bottom: 0px solid #cccccc;
    font-family:eurofurence;
    font-size:17px;
    width:610px;
    background:#fff;
}

and here is my set up

            <div id="content">
 <?php while ( have_posts() ) : the_post() ?>   

 <div class="date">
 <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">
        <div class="entry-top">
            <h2 class="entry-title"><a href="<?php the_permalink() ?>" title="<?php printf( __('Permalink to %s', 'wpbx'), the_title_attribute('echo=0') ) ?>" rel="bookmark"><?php the_title() ?></a></h2>
    </div>
            <div class="entry-content clearfix">

        <div class="entry-content">
                <div id="text"><?php the_content() ?></div>
                </div>

            </div>

            <div class="entry-meta">
                <span class="entry-meta-sep">|</span>
                <span class="entry-more"><a href="<?php the_permalink() ?>" title="<?php printf(__('Continue reading %s'), wp_specialchars(get_the_title(), 1)) ?>"><?php _e( 'Read More &raquo;', 'wpbx' ) ?></a></span>
            </div>
    </div><!-- .post -->
 <?php endwhile; ?>

        <div class="navigation clearfix">
            <div class="nav-previous"><?php next_posts_link(__( 'Previous <span class="meta-nav">Articles</span>', 'wpbx' )) ?></div>
            <div class="nav-next"><?php previous_posts_link(__( 'Next <span class="meta-nav">Articles</span>', 'wpbx' )) ?></div>
        </div>

    </div><!-- #content -->

the problem is i want the “date” div to float to the left of the “entry” div but all the “date” div is doing is sitting on top of the entry div why is that?

Answer 1

You haven’t closed .date DIV

<div class="date">Date</div>

And for future I would replace the CSS with

.right{float:right}
.left{float:left}

Then you can say <div class="date right"> </div>

Cleaner CSS:

#content{width:1070px}
.right{float:right}
.left{float:left}
.date{width:80px;margin:50px 8px 0px -60px;padding: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 8px 0px 0px;padding:20px 0px 0px 0px;border-bottom:0px solid #ccc;font-family:eurofurence;font-size:17px;width:610px;background:#fff}

Also

padding:0px; 

Is the same as

padding:0px 0px 0px 0px;

And

color:#ffffff; 
color:#cccccc;

Is the same as

color:#fff; 
color:#ccc;

If you are not able to see date DIV, remove the negative margin -60px you have set