How to float close button to top-right of div?

When an administrator on my website makes any changes, I want them to give feedback through a “messages” div (ie. “the page has been succesfully updated”). I’m trying to place a close button to the top-right of the div, but am unsuccesfull:


<style>
.messages {
  padding: 5px;
}
      
.status {
  border: 1px solid #ec0000;
  background: #ffabab;
}
      
img#close {
  cursor: pointer;
  /* float: right; doesn't work */
  /* position: absolute; makes the image break out of the div */
}
</style>

<div id="messages">
  Some error messages for the users of my website...
  <img id="close" src="images/close.png">
</div>

To be clear: I have no control over the website’s HTML output, so I cannot create additional divs or anything. Could anybody help me with this?

Hi :slight_smile:

Put the close image at the beginning of the div instead of after the error message and give it float:right;.

Also you have

.messages {
  padding: 5px;
}

Yet you have
<div id=“messages”>

You need to change the CSS to be #messages

Cheers.

Again, I have no control over the HTML output, so I can’t move the image tag above the text. Thanks for the #messages notice :slight_smile:

Do you (or anyone else) have any other ideas?

Well since you have something above the image that screws you over. A quick fix is this

<style>
*{margin:0;padding:0;}

.messages {
  padding: 5px;
}

.status {
  border: 1px solid #ec0000;
  background: #ffabab;
 [color=red]height:30px;
  margin-top:20px;[/color]
}

img#close {
  cursor: pointer;
  [color=red]position:relative;
  top:-50px;
  height:20px;[/color]
  /* Move it up the exact amount of px of the height of the <p> AND the margin*/
}
</style>

<div id="messages">
  <p class="status">Some error messages for the users of my website...</p>
  <img id="close" src="images/close.png">
</div>

Edit: You might have to mess with values but that shows a rough idea.