jquery div hidden and show, how to control show div's position?

Question

I make an easy div hover show and hide introduce words with jQuery, in the default code. All the introduced words position is relative. the introduce words div's of box4 and box8 will out of the div#main .

and how to do? so that the introduce words div of box4 and box8 will make a right align?

For I can not describe well in english, I make a picture. you can see when hover in box4 , the introduce words div's right will not out of the div#main , this is what I need. Thanks.

code link here: http://jsfiddle.net/KTGUz/

image:

Answer 1

Pure jQuery way is $('.box:nth-child(4n+4)').addClass('oy'); and adjust your positioning to make the .box relative and the .hover absolute, making .oy {right: 0;}

Here's the stuff: http://jsfiddle.net/3jGdm/

Answer 2

You could give boxes 4 and 8 a different class if you know they're going to always be on the edge. Here's an example:

http://jsfiddle.net/M687z/

Answer 3

If it depends on the window width how many boxes are in a row you can use the jQuery.offset() feature to reposition the title_box if it would overflow:

http://api.jquery.com/offset/