Problema al colocar imagen encima de otra imagen

[RGT]

Aqui el codigo que tengo actualmente:

Código PHP:

<div id="disco-aleatorio">
  
                <?php
                    query_posts(array('orderby' => 'rand', 'showposts' => 1));
                    if (have_posts()) :
                    while (have_posts()) : the_post();
                ?>
                
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('medium'); ?></a>
                
                <div class="popular">POPULAR!</div>
                
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title() ?>"><?php the_title(); ?></a></h2>
 
        <?php endwhile; endif; ?>
 
        <?php wp_reset_query(); ?>
        
  </div>
 

Código CSS:

#disco-aleatorio {
    float:right;
    background-color:#FFF;
    border: 1px #ccc solid;
    padding: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    height:140px;
    position: relative;
}
 
#disco-aleatorio img {
    width:236px;
    height:140px;
}
 
#disco-aleatorio a {
    color: white;
    font-weight: bold;
    text-decoration: none;
}
            
#disco-aleatorio a:hover {
    text-decoration: underline;
    color: white;
}
                
#disco-aleatorio:hover {
    background-color:#2fb6f6;
}
 
#disco-aleatorio h2 {
    position: absolute;
    right: 2px;
    bottom: 2px;
    background: rgba(0,0,0,0.6);
    width: 226px;
    padding: 5px;position: absolute;
}
 
.popular {
    position:absolute;
    top:2px;
    left:2px;
    background-color:#a42c2c;
    color:#FFF;
    padding:5px;
    font-weight:bold;
    letter-spacing: 1px;
        -webkit-border-bottom-right-radius: 2px;
        -moz-border-radius-bottomright: 2px;
        border-bottom-right-radius: 2px;
}
 

Que tengo mal?

mira el espaciote que tengo:
http://oi43.tinypic.com/8wwm6c.jpg