How to get my jQuery UI "close" button to show up in the upper right of the DIV and not impede the flow of text?

As you can see from the demo, I have two divs, notice and content:

http://jsfiddle.net/ssZXA/

notice is for error messages that occasionally need to be displayed while content is for the main page content that is always present.

I created a button (closebutton) that causes the notice section to disappear.

But I don't know how to position it in the upper开发者_JAVA百科 right area of the notice div - where you would expect a close button to be - without interfering with the flow of text.

Place the button before the text and add this CSS:

#closeButton{
  float: right;
}

I would probably do it like this:

See: http://jsfiddle.net/thirtydot/ssZXA/3/

#notice {
    position: relative
}
#closebutton {
    position: absolute;
    top: -14px; right: -14px;
    width: 28px; height: 28px
}

You could do it without the -14px, but then it would look like this: http://jsfiddle.net/thirtydot/ssZXA/4/ (which is no good because the text overlaps).

In that case, you'd be better going with one of the float: right-based answers. Or a smaller button.

im no expert in css but check this out http://jsfiddle.net/sharan/ssZXA/1/

small button http://jsfiddle.net/sharan/ssZXA/2/

You have two options:

One is getting the button before the text (inside the div) like that:

    <button id="closebutton" style="display: inline; float: right">Close</button>

The other is getting a div on the top and the getting the button code above.

The difference between them is that in the first on, the text will co-exist with the button in the same area. In the second one, the div above will create an empty area, because the button will have floated to the right.