Setting the height to 100% on my web page is messing things up. The footer is not staying on the main page, it's going past the main viewable area.... how do I prevent this from happening so that it stays on the bottom of the page?
see example: [URL_REMOVED]
Try putting the footer inside the <div id="bdy"></div> and positioning it on the bottom.
Since the #bdy has min-height: 100%, it pushes the footer down.
If you place the footer inside the #bdy, give it the style position: absolute; bottom: 0;.
UPDATE:
Ah, that is because the position: absolute; on the footer makes the instruction bottom: 0; stick it to the closest ancestor which does have not position: static(which is default). You can fix the issue by applying position: relative; to #bdy.
Related
currently I have troubles with bootstrap5 and modal respectively glightbox.
when switching back from these applications, the static navbar shakes horizontaly.
the same with glightbox, additional to that the sticky footer also slides up when the screen is grayed out.
deliberate specific features: sticky footer, vertical scrollbar always on
fullscreen sample: https://codepen.io/manu_g/full/dyZOdbV
Inspecting your codepen, I observed that the margin-left and margin-right of the child element of the #header increases, when the modal opens.
When you leave modal, margin-left and margin-right are returning back to their initial values, causing the shake.
The fixed position seems to be the root of cause. Thus, I would go with position: sticky instead and add some margin top in the .inner-pages.
For example,
.fixed-top {
position: sticky;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.inner-page {
margin-top: 50px;
}
I have been trying to set my footer in my web for a while with no luck..
The footer sticking to the bottom of the screen, and if there is scroll-bar, so when I scroll down, it will slide up...
I want it to stick to the bottom but not like position: fixed (if there is scroll-bar, then I don't want to see the footer until I scroll to the bottom).
There is 3 main components in my web (header, content and footer).
This is the footer css:
background: #929191;
border-top: 1px black solid;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
I have tryed changing html and body to "height: 100%" but the only thing that was almost like I wished for, was when it made the height bigger than the screen.
It was like height: 110% (even though the sum of heights was 100%).
I Tryed to reduce it, until I fit but it every little change in the UI make troubles.
I would very appreciate any help..
Sounds like you are looking for <footer>. Keep in mind it won't work in early versions of Internet Explorer. Here is some more information. Let me know if this works out.
Try this on your footer -
.footer {
position: relative;
bottom: -500px; // you can adjust the negative value
}
Design question here. How can I make the #main-wrapper slide over the #single-carousel on the following page: http://duijnisveld.wpengine.com/
Right now it moves up when scrolling, I need the carousel to stay put and make the main wrapper slide over it when scrolling down.
giving .header-foto-wrapper position: fixed and #main-wrapper position: relative gives unexpected behaviour for me, I'm clearly missing something important.
*note, in the url, the .header-foto-wrapper does not have the position fixed as it breaks the layout and it's a live site for the client to see.
Thanks!
You'll need to apply width. Things go a little wonky when a container calculates width once you pull it out of the content flow. A width:100% will fill the page width. You'll also want to move the content area down and apply a background color.
.header-foto-wrapper {
position: fixed;
width: 100%;
}
#main-wrapper {
position: relative;
top: 100%;
background: #fff;
}
By setting the position as absolute.
.wrapper {
position: absolute;
left: 100px;
top: 150px;
}
http://www.w3schools.com/cssref/pr_class_position.asp
Is it good practise to set absolute positioning of a footer, if we know its height?
For example, if its height is 100px:
footer {
position:absolute;
bottom: 100px;
background: red;
}
And if its not, could you please help me to position a footer without divs, only with HTML5 tags, because i found some solutions, but they are with extra divs.
footer {
position: absolute;
bottom: 0;
height: 100px;
background: red;
}
When you specify the bottom position property you're positioning the bottom edge, so you don't need to account for the height like that. You'd only set it to 100px if you want the bottom edge to be 100px from the bottom of the page.
Usually the only time I find myself positioning the footer manually is if it's position: fixed though. Assuming your page flow isn't wacked it's usually easy enough to have it be the bottom element on the page naturally, which is what you're trying to achieve with position: absolute;.
Heyo, I'm using a 2000px width image as a background for a 960px width webpage. I am trying to make it so it doesn't show a horizontal scrollbar when a part of the image is to the right of what's visible, but what I'm trying to do is not working for me.
Two IDs are involved. One is 'bg' which has the background image as its background and is positioned where I want it, while the other is 'bg_holder' which contains only 'bg' and which I tried to use to neatly cover the visible web page area and hide its overflow so the part of the background image that is jutting out wouldn't cause a scrollbar. But this does not appear work, as a scrollbar is created when there is a part of the image to the right of the visible web page (but not when it's to the left).
Is there anything wrong with this CSS snippet? Could something outside of this snippet be the source of the problem? Is there another approach I can take?
#bg_holder {
position: absolute;
overflow: hidden;
min-width: 960px;
top: 0px;
left: 0px;
right: 0px;
height: 100%;
}
#bg {
background: url(../img/bg.jpg);
position: absolute;
height: 1050px;
width: 2000px;
margin-left: -1366px;
left: 50%;
z-index: -1;
}
To answer your question, by positioning #bg absolutely, you take it out of the document flow / out of it's parent element, so the overflow:hidden has no effect.
As an additional comment, you can position the background image exactly where you want (x, y) when you put it directly in #bg_holder, there doesn't seem to be any need to put the background in a separate div. As far as I can tell at least, but I haven't seen the rest of your code and don't know what you want to achieve exactly.