ansaurus

Question

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

Answer 1

+1 A:

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.

Matt Ball 2010-05-28 15:40:57

Thanks, but where in the DOM hierarchy I should place the div?

George 2010-05-28 16:07:10

And right: 0 does not work, because the div has to be glued not to the window, but to the page's frame (that is other div) as in this image: http://www.binarymark.com/layexp.png

George 2010-05-28 16:08:13

Try what's in my update.

Matt Ball 2010-05-28 17:08:47

+1, works. Could be cleaner, but it works.

ANeves 2010-05-28 17:21:18

@ANeves: what would you recommend doing?

Matt Ball 2010-05-28 17:44:20

I sugest, for the CSS: `top: 300px;`, no text-align, no width. And perhaps adding a container to the HTML example, so that the effect becomes clear: `<div id="container" style="border: solid red 1px; margin:20px;"><div class="right-tab">TEXT</div></div>`

ANeves 2010-05-28 18:03:07

Thank you for suggestions guys, but it does not work. Here's why:1. If I do use width, it has 2 disadvantages:1) the div having width = to almost entire width of the page will actually overlay my page's content, and that's not acceptable, becaue a user should be able to interact with pages content.2) the fixed width also does not work, because the page is centered, and the remaining empty space to the right and left of it (i.e. space between page's frame and the window's border) is different - it depends on screen resolution, size of window, etc.

George 2010-05-28 19:21:26

2. And if there is no width, then the div will be glued to the left side of the WINDOW, NOT the right side of the page!

George 2010-05-28 19:22:01

You can set the z-index on that div to a lower number so that it is overlapped by your content. Set the width of the `div.right-tab` to be the width of your content div plus a fixed amount.

Matt Ball 2010-05-28 20:07:23

Thanks for explanation. But the problem is that "plus a fixed amount" does not work, because it is never a fixed amount! The amount always depends on the width of the window, and it could be anything!Essentially it boils down to:position: fixed;top: 300px;width: 100px;height: 50px;left: [and this is the problem! - ideally it has to be this: WindowWidth/2 + PageFrameWidth/2; but is it possible at all?]In other words, it all works, except for horizontal positioning that should be #of pixels from left till center of the window + 1/2 of the page's frame = page's right frame border

George 2010-05-28 20:25:09

Ooops, sorry! It does work! Thank you very much, Bears will eat you!

George 2010-05-28 20:32:10

And I can avoid overlay with z-index, you are right!PS: I needed to position the div inside a fixed-width container div, not the body! That was the culprit!

George 2010-05-28 20:33:01

No problem. Other people's work is just so much more fun than my own!

Matt Ball 2010-05-28 20:44:45

While this method works, I did discover one problem: I want this right div to be always accessible, even if visitor's screen size is at most 1024px. That means a horizontal scrollbar has to be present, if the right div does not fit into window. Unfortunately the horizontal scrollbar won't be present automatically, since the right div will not be considered by a browser to be contributing to page's width since it's fixed. So How do you do it? You encapsulate the whole page in another div and set its width to say 1200px. Now the horizontal scrollbar will be on if the window's width < 1200px.

George 2010-05-28 20:52:37

And here's the problem: As you use the horizontal scrollbar to scroll the page in order to make the right div visible, the page is scrolled, but the right div remains fixed in place relative to the window and thus remains hidden! Very weird. I have tried it in Chrome and FF, and both have this issue... It's not critical of course, but will definitely be a problem for those visitors whoose window width is smaller than 1100 px required.

George 2010-05-28 20:54:47

ansaurus

tags:

views:

answers:

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

related questions