EDIT: BEFORE YOU ANSWER, READ THIS! I can't set footer like "height: 30px;" because it has to stretch! That's why most solutions don't work!!
Okay so I have a problem. My footer sticks well to the bottom of the page if there's enough content, but when I have only a few lines of content, there's a white space under the footer. Picture:
(source: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page)
The page which I got that image from offered one solution, but it doesn't work for me. Because my footer needs to be dynamic (I don't know the height in pixels or whatsoever, the div just stretches by the amount of content placed in footer)
All of the solutions I've found need a specified height for the footer... How could I get the footer to stay at the bottom of the page?
My divs look something like this:
<div class="mobile_main">
<div class="header">
Stuff
</div>
<div class="body_main">
Stuff
</div>
<div class="footer_mobile">
Stuff
</div>
</div>
All the 3 divs inside the main divs are stretching by content (no height specified).
Does anyone have a solution?
you could give the footer an absolute position at the bottom left corner of the mobile_main container div. therefore you also should give this container a relative position.
http://jsfiddle.net/kasperfish/FQ6fG/5/
.mobile_main{
position:relative;
}
.body_main{
background:grey;
min-height:300px;
}
.footer_mobile{
width:100%;
position:absolute;
bottom:0px;
left:0px;
background:lightblue;
}
.header{
background:yellow;
}
I think you want footer always fixed in bottom of the screen. If it is here is the solution.
.footer_mobile{
width:100%;
position:fixed;
bottom:0px;
left:0px;
background:lightblue;
}
But if you want footer should stay below the main container until the container height less than window height and footer get fixed on window screen bottom when container height get larger than window screen size. For that condition we have to use the jQuery for solution.
Don't use height in footer.
#body {
padding:10px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
background:#6cf;
}
Related
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.
I'm braindead on this and I know it's simple.
There's a header div, appears fine. There's a left-sidebar div, appears fine with top snuggled up to header div.
Then there's a main content div. There is an image and h1 which appear like you would expect up against the header div, but then a large gap appears until the navigation (in a nested div). Navigation is correctly in the main content div, but top of this div always aligns with bottom of sidebar content.
I've tried mixtures of clear:left and both and floating and whatnot. If inside the html I move the sidebar div below the main content div then the main content has no gap but the sidebar has a big top gap and appears flush to the bottom of where the main content nav ends.
What am I missing here, thanks in advance!
Are you setting any widths (or padding, margin, border) which might make your problematic div too wide to fit?
Remember that if you are doing something like :
width: 100%;
border: 1px solid;
Then your element will take up 100% width + 2 pixels.
It sounds like you have your sidebar occuring first in the source order.
If you have the two divs (sidebar, main) floated in different directions, then look at the width avaiable they are sharing. Reduce the width of one div (you should have width set on your floats) until their combine width, including padding, margin, borders fits in available space. (I will only use width in my example for brevity).
When this effect happens, in my experience, the one occurring later in the source order is the one that gets prevent from sliding up into it's spot by too much width.
<div id="container">
<div id="header">head</div>
<div id="sidebar">side</div>
<div id="mainContent">main</div>
</div>
Width of #sidebar & #mainContent too wide (#mainContent gets bumped down):
#container{
**width:950px;**
margin:0 auto;
background:blue;
}
#mainContent{
float:right;
**width:651px;**
background:red;
}
#sidebar{
float:left;
**width:301px;**
background:green;
}
Width of #sidebar & #mainContent fit inside container:
#container{
**width:950px;**
margin:0 auto;
background:blue;
}
#mainContent{
float:right;
**width:650px;**
background:red;
}
#sidebar{
float:left;
**width:300px;**
background:green;
}
btw...if you floated the two elements in the same direction, but their combined width is too wide, the last one in the source order would fit underneath the above floated element.
Does your h1 or img have a top margin? It will stick out of the top of the mainContent div and push it down.