CSS Positioning - Top and Right

Question

I'm creating a div which has to have a close button in the upper right corner just like in the image image http://rookery9.aviary.com.s3.amazonaws.com/4655000/4655386_f01b_150x250.jpg

The first image was made in photoshop. I'm trying to do the same but with CSS. "Fechar" is the close button (in Portuguese). What is the better way to properly position it without workarounds, with clean CSS and Web Standards?

Here is my code: http://jsfiddle.net/wZJnd/

This is as far as I could reach.

Answer 1

I would use absolute positioning inside a relatively positioned #header:

HTML

<div id="header"> 
  <h1>Your Title</h1>
  <a href="" class="close">Close</a>
</div>

CSS

#header {
    width: 700px;
    height: 200px;
    position: relative;

    text-align: center;

    background: #000 url(the-logo.png) no-repeat 30px 10px;
}

#header .close {
    position: absolute;
    top: 20px;
    right: 20px;
}

This will cause the a.close link to use the #header as its coordinate system and position it 20px from the top and right edge.

In my experience padding, margins and float are more sensitive to rendering inconsistency and font size changes than positioning. As a result, I use position whenever possible.