Question

I’m using a “homemade” php calendar in my site’s right sidebar. The site’s body is a fixed 1000px. When a day on the calendar with an event scheduled is hovered over, a div shows up that gives details on that event. Here’s a visual representation:

The problem here is that the event box usually exceeds the boundaries of the body. On smaller monitors, the box extends past the right side of the screen and cannot be read. I tried having it fall to the left instead of the right, but this covers the main text area and looks odd. Is there anything I can do to make the box fall to the right, but if required (viewed on a smaller screen), be pushed to the left? Similar to a float, I guess.

Thanks.

Edit: Sorry, I forgot to mention the way I’m making the boxes show up. It’s entirely CSS-driven. The containing element is positioned relatively, and the boxes are absolutely positioned. They’re kept off-page (left: -9999px;) and show up upon calendar cell hover. This process seems to be snappier. Therefore, positioning the element to avoid this problem is not possible.

I don’t want the box positioned to the left of the cell. I want it positioned to the right unless otherwise required due to a visitor’s screen size.

Answer 1

For Javascript:

1. Check for the size of the document (to find the right most pixel)..
2. Check for the right most pixel of the box
3. Subtract box.right from document.right and move box left by that amount

For CSS:

Make the position of the box absolute and right: -10;