CSS Positioning - Top and Right

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 photo开发者_如何学运维shop. 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.

---

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.

---

You could do a :

img.close {
float:right;
margin:25px 25px 0 0;
}

---

I would work with div wrappers around the img

So you would have a div for your header "div.header" that would contain these div :

• div.logo : The logo on the left containing an img tag;
• div.title : The title of the page;
• div.close : The close button that would contain your img tag.

I better like using the padding than the margin attribute. I think it works better for compatibility purposes.