Creating a div is fixed vertically but glued horizontally to the page border

Question

Can you go to http://www.binarymark.com/Products/ColorPickerPro/default.aspx and pay attention to the page layout.

What I want to do is stick or “stick” a small div to the right side of the page, that is, so that it is outside the right frame of the page.

However, vertically, I want the div to be bound to the window, no matter how many pages it scrolls, it should remain fixed 300px from the top edge of the window.

Here it should look like http://www.binarymark.com/layexp.png

Can you help me?

It seems easy, but I have no idea how to combine vertical fixed positioning and horizontal relative / absolute positioning and make sure that it supports all major browsers.

Thank.

Answer 1

position: fixed;
right: 0;
top: 50%;

---

Edit: try pasting this div as the first child<div id="content">...

<div class="right-tab">TEXT</div>

CSS

.right-tab {
    position: fixed;
    top: 50%;
    width: 1100px;
    background-color: red;
    text-align: right;
}

That should get you started. The width will determine how much past content you want to display on the tab (so in this case it is about 100 pixels). The red background is just so you can more easily see the div.