I do not understand why a <footer> element in my code is not located at the very bottom of it's page.
Here is a fiddle:
http://jsfiddle.net/Kd5Xx/
I've set the position of both the footer and its parent, and i also gave it a specific height. HTML and body are set to height: 100%.
So why does this not work?
you have to make position:absolute; http://jsfiddle.net/Kd5Xx/1/
footer {
position:absolute;
}
Related
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
I am having a problem with my footer. I have a page with some content and on some devices (like mobile - in zoomed out view), my page content does not fill parent device height while on some devices, it does.
The footer is creating a problem with these different heights. When the content doesn't fill the parent device height, the footer is shown correctly at the bottom of the page but when the content fills the parent device height and overflows, the footer is shown over the content.
Footer with content not filling Parent height (shows correctly)
Footer with overflown content (doesn't show correctly)
Picture quality is not that clear but the issue is clearly visible.
This is the CSS code I have been using till now.
#footer{
display:block;
margin-right:auto;
margin-left:auto;
position:absolute;
bottom:0;
height:100px;
width: 60%;
text-align:center;
color:green;
font-size:18px;
font-family:Times;
}
How can this be fixed? I want to show the footer at the end of the page when content is overflown.
on your #main element right before the footer (assuming you are using id="main" for the item with the green border, do the following:
#main {
margin-bottom: 100px;
}
EDIT:
<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
#wrapper {
position: relative;
padding-bottom: 110px;
}
whenever you position something absolute you take it outside of the DOM, meaning in this case it sits bottom 0 (based on your css) to the the nearest relatively positioned element. I put the footer html after your wrap or content block and just have it centered by saying
margin 0 auto;
If you need the footer to be absolutely positioned, you could always add a margin-bottom or padding-bottom to the body element. Just make it the 100px of your absolutely positioned element and it should force the content above your positioned element.
Alternatively, you could just set the footer to be positioned static, but you'll lose the ability for the footer to be at the bottom of the screen when your content is too short.
Have a look at, http://thomaspalumbo.com
I have this CSS for my website's container:
.graybox {
padding: 0 30px 30px 30px;
background: #ededed;
position:absolute;
left:0;
right:0;
}
Then I have a container on top of that to center that info.
The .graybox container spreads the width of the page like I want but now my footer div is hidden, according to firebug is it actually behind? And up on the page?
Is there a fix for this?
While I'm here can anyone explain the white space on the right side of the page. It comes into effect once the page is resized smaller.
You can use the CSS z-index property to make sure your footer is in front of the content. Z-index only works when the element is positioned though. So make sure you add position:relative to your footer
#footer{
position:relative;
z-index:999;
}
Read more: http://www.w3schools.com/cssref/pr_pos_z-index.asp
EDIT
Just checked out the code of your website, and I don't understand why your graybox is positioned absolutely, this will only make things more complex. The same goes for your menu, why position it absolute, why not just add it in the right order in the HTML in the first place?
EDIT
If you want to center your content but with a background that has a 100% width then you can simply add a container div like so:
HTML
<div class="container">
<div>lorem ipsum....</div>
</div>
CSS
.container{
background:red;
}
.container div{
width:400px;
margin:0 auto;
background:yellow;
}
See JSFiddle here: http://jsfiddle.net/HxBnF/
Currently you cannot do this because you have a container which you set at 980px, don't ever do that unless you are sure you don't want anything to wrap over it, like in this case the background of a div in that container.
in the div style, just assign a z-index value greater than any other z-index such as
.divClass{
position: absolute;
z-index: 1 //if other elements are still visible chose a higher value such as 20 or even higher.
}
In Microsoft's homepage (http://www.microsoft.com/en-us/default.aspx) you see the white background stretch all the way to the bottom and the sides in grey?
How do you that in an HTML/CSS? I mean, I've been trying but the DIV won't go all the way down...
Help?
Well, their page has enough content to force the page to scroll. Like this
If you don't have enough content, you can set the height of the div to 100%. The important thing to note here is that it will be 100% of its parent's height. That's why you have to set the html and body heights to 100% as well. DEMO
html, body {
height: 100%;
}
#contentDiv {
height:100%;
}
HTML
<body>
<div id="contentDiv">my content here</div>
</body>
You must make sure that the body and html file has 100% height aswell, cause 100% is what it gets from the current height of the parent element
so if you set, and html's parent is the window(document) that's why you get a full height
html,body{
height:100%;
width:100%;
background:gray;
}
div{
height:100%;
width:100%;
background:red;
}
you will get a red page
Set the height to %100 and sometimes setting the parent element to position:relative will set things straight. Post your html and css and we could help you better.
All,
I have a page which is suppose to take up only the available screen space in the browser.
I have a 'top bar' and a 'bottom bar', both of which are fixed positioned at the top and bottom of the page. I want to have a div which will consume (take up) the remaining of the space inbetween the two bars mentioned above.
Its crucial that the middle div is not overlapped by the top and bottom bars. Is this at all possible with CSS or do I need to make use of js.
Also, if I do go with js, considering the browser loads up the CSS first before the js code, how is the above work out using js for centre positioning?
Many thanks,
You can use relative and absolute positions. Here an example:
css
html,body,#wrapper {
height:100%;
margin:0;
padding:0;
}
#wrapper {
position:relative;
}
#top, #middle, #bottom {
position:absolute;
}
#top {
height:50px;
width:100%;
background:grey;
}
#middle {
top:50px;
bottom:50px;
width:100%;
background:black;
}
#bottom {
bottom:0;
height:50px;
width:100%;
background:grey;
}
html
<div id="wrapper">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
Demo: http://jsfiddle.net/jz4rb/4
This demo works for me in Chrome12 but YMMV depending on which browsers you need to support. For example position:fixed does not work correctly in IE6.
Use absolute positioning on the body tag. position:absolute with zero top and bottom will "stretch" body to be the same size as the browser window. Alternatively, setting height: 100% also works but I remember it works wierd for certain old browsers.
Then use absolute positioning on the center div, with enough top/bottom offsets to avoid your header and footer bars. The header bar is absolutely positioned with top and the fotter is absolutely positioned with bottom.
Note: This won't work on mobile browsers. You'll need to use JS to get the window's height and manually set the center div's height.