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.
Related
I have a web page using bootstrap layout.
Currently built with Container>row>col.
I need to position a button at the bottom of every page that will stay at the bottom of the page, unless the user needs to scroll down to view. At that point the button needs to be at the end of the content.
I've tried multiple variations of Position: absolute, fixed, sticky, but in most cases, when the content of a page is short, the button will park itself at the bottom of the content, half way up the page. I need it to remain either at the bottom or buried under the scroll.
(Almost like a "bottom-max" value.)
The screen size is not known, as this is an app built for phones and tablets.
okay I have a 100% width layout here and I have a sub menu on the left and content on the right side of the menu which have links which cant be clicked on because the left side sub menu has a z-index of 99 so I cannot click on the links on the right side content area. My sub menu is setup so that the overall area is 1000px in the center then auto right and left margins so the sub menu sits on top on the main content area. I tried to reposition without using the 1000px in the center but was not able to get it to work so that it stays on the left side of the content. I tried using pointer: none css for the submenu which allows the right side content links to work but then disables the sub menu button links.
Basically what I need is a solution which would allow both layered divs to have links on them...I dont know much javascript but is there any solution that will work on all browsers?
Here is the link to the site design http://liquidchrome.net/price_transfer/terminal-contacts.html
you can see that only the very bottom links on the right side content area work and none of the top links are clickable.
thank you
The HTML structure you are using seems to be the problem. It seems overly complicated when it doesnt need to be.
I suggest you restructure the basic layout of the core elements like in the link below
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
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
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 have a centred web page (using margin: 0 auto; on a 'wrapper DIV') that has a long side-menu.
One page template needs a wide content area, so I am attempting to add a link at the top that will toggle showing the side menu (using jquery), so if clicked it will appear over the top of the main page content.
I can achieve this if I use 'position: absolute;' on the #sidemenucontainer DIV but if I use relative positioning (so it's in the correct place relative to the centred layout ie: not stuck in the top left corner of the browser), then it pushes the main page content down to underneath the menu, rather than appearing 'above' the page.
I can prepare some sample code if required, but I was hoping the above made sense. I'm sure I'm missing something obvious.
Thanks!
Absolute means absolute in relation to the nearest relatively positioned parent div.
By giving your wrapper a position of relative and your side menu a position of absolute you'll be positioning the side menu within the wrapper.
You'll need the side menu positioned absolutely so that you can move it over the top of other items, in this case, the main content.
Here's a sample: http://jsfiddle.net/RLcFf/