I have a weird CSS problem. I have a banner that I need to position at the bottom of every page.
To this end I have set body to position: relative; and my banner to position absolute; bottom: 0px;
The problem is my banner positions differently on different pages such as the following:
http://www.plotsandhouses.com/node/1,
http://www.plotsandhouses.com/node/29,
http://www.plotsandhouses.com/node/30
The 'custom-page_closure_wrapper' div is what I am trying to position at the bottom of the pages. I can do this by setting position: fixed; but I don't really want the div visible at all times - only when the bottom of the page is visible or the user scrolls down to see it.
What am I missing?
To add on to Marc's answer, there is a CSS solution to it called the Sticky Footer.
The reason why your footer doesn't "stick" to the bottom of the page is because the height of the container where the footer is absolutely positioned in is not more than the height of the viewport. Therefore, by forcibly stretching the container to the full height, the technique ensures that the footer always stays at the bottom.
You can try adding the following in your CSS file:
body {height:100%;}
#custom-body-wrapper {height:100%;} /*this is the container of your absolute div*/
and removing the position:relative on your body tag.
Related
I can't seem to get my sticky footer working. It's my understanding after some research that the parent element of the footer needs to be set to position: relative. Then the footer should be set to position: absolute with bottom: 0. I've done that and it looks fine fullscreen. But when the browser is resized to be smaller, the footer sits in the middle of the page. Any advice? I've been searching for about an hour with no luck. Thanks!
Edit: To clarify, I'd like for the footer to only be visible once you scroll to the bottom of the page or if the whole page is in view. Not persistent on the page at all times (position: fixed.)
(Please see the codepen link below)
Codepen Link
You need to set a min-height: 100%; to the overarching div/body. You will also need to add padding to the div closing just before the footer ie .content-area so that the footer doesn't cover up your content when the screen height is smaller.
https://codepen.io/anon/pen/mqaVxM
I have a footer that have this css style
position: absolute;
bottom:0;
left:0;
right:0;
width:100%;
background-color:#000000;
color:#ffffff;
text-align:center;
but if I open the browser in a small window (so without see all the content of the page) the footer is on the bottom and when I scroll down footer remains fixed in the middle of the page!
How can I solve?
is your parent container (parent of footer) set to position:relative. try setting body to position:relative or footer to position:fixed and body to padding-bottom: height of your footer (so it doesn't cover the content).
Hope it helps
I think you have to use position: fixed; to have the desired output.
absolute position make your footer on the bottom of the current height of the window, relative to the parent (here the parent is the body) when you load it. (So when you scroll in doesn't follow the scroll to the bottom)
An element with position:fixed is fixed with respect to the viewport.
It stays where it is, even if the document is scrolled.
Fiddle
Here's the wiki about difference between absolute/fixed position
https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning
My basic layout is a couple of divs within a div - http://jsfiddle.net/nxPhy/ - I'm looking for a css way to have the const div always visible regardless of any horizontal scrolling of the parent div (so only the content div is actually scrolled).
Add position: relative; to container, and remove floats and add position: fixed; to the block you want to fixate.
Result:
http://jsfiddle.net/nxPhy/1/
You want to add:
position:fixed
to the div that you want fixed. Doing this will position this div and it's containing elements fixed.
i have a problem with the entire content of my page.
The problem being without a scrollbar present my content is about 20px to the right, but when a scrollbar is present it shifts to the left.
I have to compensate for this for an absolute postioned div by positioning it over the content by 20px until a scrollbar is present as it rests at the right hand side of the page.
This is a crappy fault on my behalf but i just want an easy way to fix this. Any quick and easy suggestions? Would i be better off making the main content div an absolute one?
One quick and dirty way is to always force the scrollbar to be visible with:
html { overflow-y: scroll; }
Not ideal, but it standardizes the appearance if the lack of scrollbar offset is breaking your design.
If I'm understanding your problem correctly, your absolute div is 20px off when a scrollbar is present? If that is the case what you can do is set a parent div that wraps around your content and absolute div.
Be sure to set this wrapper div to position: relative; so now your absolute div will be positioned inside the relative div instead of the document level. If there is a scrollbar, the wrapper div will be offset to the left by 20px (the width of the scrollbar) and the absolute div will also.
<div class="wrapper">
your content goes here
<div class="absoluteDiv"></div>
</div>
.wrapper { position: relative; }
.absoluteDiv { position: absolute; }
I don't think your content is actually shifting in any sort of buggy way; it's just that the presence of the scroll bar makes the viewport narrower. If you're using a layout that depends on viewport width (e.g. fluid layout, or fixed-width with centered content), this will cause everything to move by half the width of the scroll bar when it appears.
AFAIK, there's no sure-fire way to compensate for that, since the width of the scroll bar isn't known.
I have a page with a wrapper div which contains a background image and all the content divs.
In this wrapper div I also have a logo div which should be placed at the bottom left corner of the wrapper without interfering with the contents.
I have managed to place the logo in the bottom left corner of the whole page (position: absolute; bottom: 0; left: 0;) The problem is that if you resize the width of the window, the background stays centered while the logo div goes left and sticks to the browser edge (as it should).
How would I go about making it stay to the edge of the wrapper div?
The reason it is not a part of the background is that the client wanted to be able to change the background without editing in the logo.
I have thought about not centering the wrapper, this would solve the problem.
I'm thinking about position: relative, but it doesn't seem to work.
I hope I'm clear enough, here is a link to the layout in case it helps.
http://development.pulsemedia.se/current/kingromeo/layout/
Make your wrapper div's position to be relative.
At the moment, your bandname div is not inside the wrapper. Put it in the #wrapper div, and set the wrapper to a position: relative;
I found my mistake. I had forgot to make the background-div fixed width so when the browser windows expanded, the background-div expanded too. Everything was behaving exactly as it should.
Put the logo div inside the wrapper div, and then set use some combination of these:
position: relative;
bottom: 0px;
float: bottom;
I'm not sure about the float: bottom, but I think you'll need it to prevent interference with the rest of your content.