CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
Tagro
Tagro

Reputation: 11

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 right area of the notice div - where you would expect a close button to be - without interfering with the flow of text.

Upvotes: 1

Views: 5456

Answers (4)

thirtydot
thirtydot

Reputation: 228162

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.

Upvotes: 2

Adriano Carneiro
Adriano Carneiro

Reputation: 58595

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.

Upvotes: 1

Niclas Sahlin
Niclas Sahlin

Reputation: 1137

Place the button before the text and add this CSS:

#closeButton{
  float: right;
}

Upvotes: 2

SRN
SRN

Reputation: 2455

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

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

Upvotes: 1

Related Questions