CSS positioning an HTML icon

Question

This is a small question. I've tried fiddling with it, but with no luck. So basically I'm trying to get this little icon in the center but at the end of the bar:

http://puu.sh/1u4SI

However if I put in the CSS top: 5px; it'll show this: http://puu.sh/1u4T1

The code is this:

 <style>
 a.news-item, a.box-link {
 display: block;
 padding: 5px;
 margin: 0 0 2px -5px;
 background: #E9E9E9;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 color: #8C8C8C;
 text-decoration: none;
 font-weight: normal;
}

a.news-item {
 width: 100%;
 height: 36px;
 color: #8C8C8C;
}


a.box-link {
 width: 230px;
 padding: 5px;
 height: 24px;
 overflow: hidden;
 color: #8C8C8C;
}

a.news-item span.title {    
 font-size: 18px;
}


a.news-item:last-child, a.box-link:last-child {
 margin: 0 0 0 -3px;    
}

a.news-item:hover, a.box-link:hover {
 background: #E2E2E2;
}

.pane .delete {
 position: absolute;                
 right: 28px;  
 top: 5px;   
 cursor: pointer;   
}

.pane {
 padding: 3px;
}
</style>

<script type="text/javascript">
$(document).ready(function(){                  
$(".pane .delete").click(function(){
    $(this).parents(".pane").animate({
        opacity: 0
    }, 'slow', function(){
        $(this).slideUp();
    });
});

});
</script>


    <h2>Topher's Articles</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br />


    <div class="pane">  
    <img src="../real/_lib/_image/minus.png" alt="delete" class="delete" />             
    <a class="news-item" href="#/media/<?php echo $row['id'] ?>.<?php echo str_replace(" ", "-", $row['news_title']); ?>">        
    <span class="title"><p><?php echo $row['news_title'] ?> <font size="2"> &raquo; <?php echo $row['news_date'] ?></font></p></span>                
    </a> 
    </div>          

</body>
</html>

Answer 1

I guess you need to use margin-top instead of top.

If you want to make top work in relative coordinates, you need to apply position: relative to its container.

Answer 2

Did you try to set padding-top instad of top?