CODEWITHSUNDEEP
csshtmlpositioningfixed
Fit Dev
Fit Dev

Reputation: 3689

Making div fixed vertically but glued to the page's border horizontally

Can you please go to: http://www.binarymark.com/Products/ColorPickerPro/default.aspx and note the page's layout.

What I want to do is to stick or "glue" some small div to the right side of the page, that is so that it's just outside of the right frame of the page.

However, vertically I want the div to be fixed to a Window, that is no matter how much the page is scrolled, it should remain a fixed 300px from the top edge of the window.

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

Can you help me please?

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

Thanks.

Upvotes: 3

Views: 15738

Answers (1)

Matt Ball
Matt Ball

Reputation: 359966

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

Edit: try inserting this div as the first child of your <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 specify how much past the content you want your tab to show (so in this case it's about 100 px). The red background is just so you can more easily see the div.

Upvotes: 7

Related Questions