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

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

You could do a :

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

Answer 2

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.

Answer 3

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.