I am building a page and for some reason my footer will not stay at the bottom of the page, it basically floats right in the middle of "article".
I add postion absolute, and bottom 0 but does not work
You can view a live example here: http://codepen.io/bskousen/full/rqbHc
Try adding this in the css:
footer
{
position:static;
clear:both;
}
Related
I have at the top of my page a div dedicated as a top bar. I want the position to be fixed so that it stays in the same place when scrolling. BUT.. once I apply the fixed positioning, all of the content moves up by about 30px (the size of the bar) and sits behind the bar making the header appear smaller in height than what it should be.
Once the css for position:fixed is removed from #topbar the content moves down to it's desired place
code via codepen: http://codepen.io/Hafkamp/pen/jabmE
css
#topbar{position:fixed}
To the #topbar, add CSS:
#topbar{
top:0;
}
Also, to the #header add:
#header{
margin-top:30px;
}
This way, your #topbar will stick to the top of the page and the following html will be pushed down by 30px(the height of the #topbar)
Just give the margib top to the header of 30 px
On my site, I want to have a 'div' at the bottom of the page. It has no fixed height, but should always start '200px' from the top of the page.
The problem I am having is that when the content of the 'div' is very long, it's background doesn't expand when you scroll down.
Here is my code: JSFiddle (updated)
I have tried working with height=auto and border=auto, but then the 'div' doesn't stretch to the page bottom when there is less content and you don't have to scroll down.
Update:
Sorry for miss expressing my problem: I need the 'div' to have position: relative because I need it to be positioned in the center of the page with left=10% and right=10%.
I also updated the JSFiddle.
Update 2:
I guess there is no perfect solution to this problem. What I will end up doing: Having two 'divs'. The first div will have the page content on it and will not show the background when there is less content; the other div will be behind the content-div and won't scroll at all, but it will show the background for the div in front when there is less content.
I've changed some 'design' from your original to be able to satisfy your requirement.
First, here's my jsfiddle
#top {
height:200px;
background:#FFF;
}
body {
background:red;
margin:0;
padding:0;
}
What I've done is I've set the whole page background to red. Made the #top height 200px with white background, so the #bottom would be 200px apart from the top. Now the trick I've done is, the #bottom is actually isn't touching the bottom if it has less content, but what you see is the illusion from the body's background and #bottom's no background.
Change it to position relative will work in your example fiddle.
add height: auto; to your div's css
EDIT:
and remove bottom: 0;
Im working on a website template and i want to make photo on the top.
Well I used the position absolute then I set top to -50px and left to -50px.
It work perfectly but I have one issue the scroll bar appear on bottom.
This is the css for the div :
#moon {
background-image:url('img/moon.png');
width:289px;
height:289px;
position:absolute;
top:-150px;
left:-160px;
overflow:hidden;
}
Give the body overflow-x: hidden
Also notice that on small screens there will be no horizontal scrollbar(!), unless you'll handle it specifically with responsive CSS.
Right now I have a floating box on the left side of my site that holds a stumble, facebook, twitter share code.
#fixmetoo {
position: absolute;
right: 30px;
top: 0px;
}
#fixme { position: fixed; }
It stays put as you scroll but i want it to disappear if the footer is showing.
I have a page that is 960 px wide and the floating box shows great but the footer is 100% wide and the box covers the footer.
so if my footer is 300px tall how can i hide the floating box IF i am less than 300 px from the bottom of the page?
Note that the z-index solution is probably what you want, but it will only work if the footer is a sibling element of the fixed-position panel (not exactly... just has to be in the same 'stacking context').
You probably however want to make the footer {position:relative; z-index:2;}, unless it is already absolutely positioned.
If you dislike the panel going behind the footer, the only sane way you can get the panel to stop scrolling before the footer is with javascript.
Try using the z-index property.
#footer{ position:absolute; z-index:2; }
#fixme{ z-index:1; }
Please post more of your code. Or use http://jsfiddle.net
I have a site that I need a sticky footer. I would like the footer to always be at the bottom of the page no matter what the users screen size. If the content goes longer than the screen I want the footer to move down with it. I want this to be all DIVs with no tables.
The below post is what I am looking for although the answer does not work with asp.net tag. When I have the form tag all css is ignored. As soon as I take out the form tag the footer sticks to the bottom perfectly.
How do you get the footer to stay at the bottom of a Web page?
Tried following?
.fixedPosition {
background-color:black;
position:fixed;
min-height:200px;
left:0px;
right:0px;
bottom:0px;
}
this will fix your wrapper to the left, right and bottom. You can then decide, what height it will have.
If there is a problem with positioning form (i dont know) try to wrapp it.
<div class="fixedPosition"><form></form></div>
Helped that?
In your css set the display property on header, content and footer divs to block.
#header {
display:block;
}
#content {
display:block;
}
#footer {
display: block;
}
If your header, content, and footer divs appear in your html page in that order then the footer should always appear beneath your content, unless there is other markup in your code that's not being shown in the example.