I have a web page with two panels. The left panel takes up the majority of of the width and displays user posts. The right panel is a navigation menu so I want it to remain fixed and never roll off the screen.
When there are too many posts to fit on one screen, a scroll bar appears on the right of the screen (NOT the panel), and the user scrolls down. This is all good, except that the navigation menu scrolls off the screen.
Both panels are within a common div. I tried setting its position to relative, then making the nav panel position fixed, with a right offset of 0. This kept the nav panel on the screen, but on the far right (ie. not within the containing div).
How do I go about keeping the nav panel fixed on the screen, but floated to the right of it's containing div?
Thanks a million!
EDIT: For and example of what I mean, look at Facebook. You'll see that the posts column can extend on forever, but the right hand column (with the advertisements) stays on the screen...
You could use the Twitter Bootstrap Affix JS plugin:
http://twitter.github.io/bootstrap/javascript.html#affix
Related
I got an issue position a div element within a page. My problem is that I have a navigation bar with a hierarchical 3-level menu. When I open some of the 3rd level menus the element containing the items goes below the page height. I'd like to keep this element in the page area, maybe moving the top position, so the user can keep use it without scrolling (that is also problematic).
You could see an example here: http://www.frankydev.com/mitoweb/
Many thanks.
I see it even happens on large screens.
Limit the height of the 3rd menu div with max-height, say 300px and then add overflow-y:scroll;. This will add an up-down scroll bar to the 3rd menu element and it looks relatively nice.
Or change all your font size and spacing to allow more room.
iam currently trying to create a "split view" site with a scrollable navigation bar on the left side and a content area on the right.
The navigation area on the left contains a search field (with a submit button) and below there is a scrollable tree view similar to windows explorer.
I looked around and found solutions for scrollable divs and divs that fill the rest of the height in a window but combining those gives me some headache
Iam looking for a solution without absolute positioning because the created page will be embedded somewhere else where this would break things.
Here is a demo of what i tried so far: http://codepen.io/anon/pen/Aesgk/
As you can see, instead of 2 scrollbars as intended, i get a third one on the right because the navigation area's height.
Thanks in advance!
Try this CSS
height: 100%
overflow: scroll
I have a fixed position side tab on my page that contains filtering options for the user. When there are a lot of options, the side tab gets too long and the bottom goes beyond the bottom of the page, where it is impossible to view.
Is there a way to have the whole page continue scrolling to the bottom of the side tab div? I don't want to put scroll bars inside my side tab div, even though that would be an easy fix. I just want, when the bottom of my div butts against the bottom of the page, to bring the whole div up with it so that the bottom content is visible.
I am limited in that I can't use jQuery in this particular application. I can, however, use Dojo.
I had this idea for a website of creating a fixed horizontal navigation bar that simply scrolls through the content when you press the menu items but I wanted to have an "introduction" div on top of it with a background image and a logo, lets say of 300px height that displays when you first load the page.
So the navigation bar would appear attached to the bottom of this "introduction" div and only when you scrolled past it would it become attached to the top of the window and become fixed positioned when you scrolled.
If you clicked a certain menu item or if you simply scrolled up to the start of the page it would attach itself to the bottom of the "introduction" div again.
Is this possible to do simply with CSS or would I have to use javascript to achieve this effect?
Thanks in advance!
I think you'll need JavaScript for this one. It will not be hard however. The only thing you need to do is to switch the positioning of the menu to 'fixed' when the menu would otherwise scroll out of the viewport.
I am developing a website where the menu it should be the end of the page. Besides the menu, another div with two images should also sit at the bottom of the page.
Follow the link to the complete source code of the page;
In red, the menu should be aligned at the bottom of the page, aligned to the center of div#leftcontent.
In the div#blue social-networks must be aligned at the bottom of the page, aligned to the center of the div#nav.
When I say bottom, I mean right at the end of the page.
If you mean not statically positioned, but just naturally occurring at the bottom of the page even when the sidebar content causes the page to exceed beyond the main content under which the bottom nav occurs, then you are out of luck using divs. This is one of CSS 2.1's major shortcomings.
You are left with two options:
Use a table for the basic layout
Use javascript to dynamically position the div based on the length of the sidebar
It's up to which you want to choose, but the javascript option will not work for people with javascript disabled, such as older mobile browsers.