If you compare the following 2 pages:
Page 1: http://goldencraft.co/wp/
Page 2: http://goldencraft.co/wp/contact/
CSS: http://goldencraft.co/wp/wp-content/themes/minecraft/style.css
You'll see that when there is content, the footer isn't properly sticking. I have been trying to fix it for an hour, so I'm hoping someone can spot the problem inside the CSS, thanks.
Example of sticky footer
The culprit appears to be the iframe right before the </body> tag. It has a visibility:hidden rule, which will allow it to displace elements on the page (in comparison to display:none).
You can either remove it, or add the following css:
iframe {
display:none;
}
Now just replace to yor #footer ID in your css file
#footer {
background-color: #252525;
bottom: 0;
left: 0;
position: fixed;
right: 0;
}
Try this one
CSS
html,body{height:100%; width:100%; margin:0px; padding:0px;}
#wrapper{width:100%; height:100%; min-height:100%; height:auto; margin:0 auto; margin-bottom:-100px !important; background-color:#999999;}
#push{min-height:100px;}
#footer{min-height:100px; width:100%; overflow:hidden; background-color:#FF0000;}
HTML
<body>
<div id="wrapper">
<div id="push"></div><!-- do not remove -->
</div>
<div id="footer">Footer</div>
</body>
Related
I have a wrapper with inside a header, a left column and the main content.
Outside the wrapper i got the footer.
My problem is that main content, if there's not enough text, doesn't stretch till the bottom of the page. If i insert lorem ipsum etc, being many rows it's all ok, but if i try with only few rows, the main div stops before the very end of the wrapper (or better, the end of the page, before the footer).
Here's my html code
<?php session_start();
unset($_SESSION['message']);
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../css/stili.css" type="text/css" />
<script type="text/javascript" src="../script/scripts.js"></script>
<meta charset="utf-8"/>
<title></title>
<style>
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<?php
include('../php/header.php');
?>
</div>
<div id="leftcolumn">
<?php
include('../php/leftcolumn.php');
?>
</div>
<div id="main" >Welcome to our site
...Some text, but not enough to stretch to the end of page...
</div>
<div style="clear: both"></div>
</div>
<div id="footer">Copyright 2013</div>
</body>
</html>
And here's the CSS
html,
body {
padding:0;
margin:0;
height:100%;
}
#wrapper {
min-height:100%;
height:auto;
margin:0 auto -30px;
width:950px;
background-color:#E3AA56;
}
#main {
float:right;
width:680px;
padding:10px;
background:#E0CD90;
text-align:justify;
overflow: auto;
}
#main a{
font-size:40px;
}
#footer{
border-top: 2px solid #CCCCCC;
width:950px;
margin:auto ;
height:30px;
background:#ee5;
clear: both;
}
Thanks in advice to everyone that will help finding the problem!
Splitting a page into multiple columns stretching automatically the height of the viewport is an ongoing topic. Just google for that, there are several CSS based solutions around there.
The problem is, that the height of the surrounding boxes are undefined (html, body, wrapper in your case). You may only add some "style" if theres a size on the parent as well.
One weired solution is, to set the style of the html object:
<html style="overflow:hidden;clip:
rect(auto);height:100%;;margin:0px;padding:0px;
background-color:white;">
(yes, it's not forbidden, you CAN do that and it's even IE 6 and 7 proven...)
and
#wrapper {
min-height:100%;
height:100%';
margin:0 auto -30px;
width:950px;
background-color:#E3AA56;
overflow: hidden; /* not sure if you want that */
}
Here are the keys to your problem you should look at and implement however you want:
html, body {
height: 100%;
min-height: 100% /* for firefox */
}
#wrapper, #leftcolumn, #main {
height: 100%;
}
You dont need to add height in wrapper it will get the height based on the content inside a wrapper :)
Is this how you want it to be like? If not, then please let me know and I'll revise my answer.
UPDATE:-
#main {
height:100%
}
#wrapper {
height:100%
}
#leftcolumn {
padding:10px;
height:100%;
}
This should work.
UPDATE 2:-
#main {
height:100%;
}
#wrapper {
height:100%;
overflow:hidden;
min-height:500px; (you can change this to your liking)
}
#footer {
position:relative;
}
This should give you the results you expect. No need to add my previous styling, just use this one now.
I'm looking for a way to add a footer to my page which will always show up at the bottom. The problem is, a lot of the content on the page is set via position: absolute;, so at the moment, unless I manually give the footer a margin-top: 900px; value, its simply hidden by one of the absolute positioned content. But on some pages where the content is less than 900px, there is an unnecessary gap at the bottom between the end of the page, and the footer.
How can I resolve this in such a way that there's no gap between the end of content and footer?
In the new jquery, you can just use this:
<div data-role="footer" data-position="fixed">
<h1>Fixed Footer!</h1>
</div>
from http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html
Put everything before the footer in a div with position relative. This div will flex vertically to the content in it and will provide the buffer to keep anything after it right below it. No margin needed.
You also can put indexes.
z-index: 1;
http://www.fiveminuteargument.com/fixed-position-z-index
In your case, put z-index in css for footer at 10 or more.
Let's suppose a <footer>, styled with display: block and height: 250px.
So all you have to do to achieve what you want is add:
position: fixed;
top: 100%;
margin-top: -250px;
That's it. It'll be permanently aligned at the bottom. :)
Sticky footer. No javascript required:
http://www.cssstickyfooter.com/
After doing some fiddling I was reminded that absolute positioning removes the element from the document flow. You cannot depend on an absolute positioned element to affect the other elements because it will not. Because you do not know the height of the content then using margin-top is clearly not option.
So I came up with this: basically do a normal layout with floats then use position relative to move the items where you want them. This way the elements still affect the document flow, however, now you have total control over the position. This is precisely what relative positioning is for: You want total control over the position of an element but you still want they element to affect the layout normally.
<html>
<head>
<style>
body {
text-align:center;
}
#container {
position:relative;
margin:0 auto;
width: 1000px;
text-align:left;
}
#header {
position:relative;
top:0px;
left:0px;
width:1000px;
height: 100px;
border:solid 1px #000;
}
#sidebar {
position:relative;
top:10px;
left:0px;
width:300px;
height: 500px; /* for demo */
float:left;
margin-bottom: 20px;
border:solid 1px #000;
}
#main {
position:relative;
top:10px;
left:310px;
width:690px;
height: 200px; /* for demo */
margin-bottom:20px;
border:solid 1px #000;
}
#footer {
margin:0 auto;
top:20px;
width: 1000px;
text-align:left;
height: 100px;
clear:both;
border:solid 1px #000;
}
</style>
</head>
<body>
<div id="container"> <!-- Holds all the content except the footer -->
<div id="header">Header content here</div>
<div id="sidebar">Sidebar content here</div>
<div id="main">Main content here</div>
</div>
<div id="footer">Footer content here</div>
</body>
</html>
How to, as the title suggests, make a div didn't move. So, when the user scroll our web, the content is moving but not the div-element. If let say the div-element I want to implement is a sidebar, how can I do that with only a CSS script? (or with HTML5 power).
<style type="text/css">
div.fixedDiv{position:fixed;top:0;left:0;}
</style>
You can try this... Jsfiddle
Html
<div class="wrapper">
<div class="fixed"></div>
</div>
Css..
.wrapper { position: relative; height: 1500px; background:red; }
.fixed { position: fixed; left:0; top:50; width:100px; height:100px; background: green; }
<style>
#yourdiv{
position:absolute;
left:100px;
top:150px;
}
</style>
<div id="yourdiv">Hello I'm div</div>
Adjust the coordinates left and top as you desire.
Anyways you can see css positionings here.
currently I'm creating a layout, which requires a div having background graphics and the top and the bottom. My mark-up which I created works fine in FF and looks like this:
#wrapper {
width: 520px;
padding: 2px;
position: relative;
float: left;
z-index: 4000;
}
#upper_bg {
background:url(images/header_top.png);
position:absolute;
height:200px;
width:520px;
z-index: 1000;
margin: -2px;
}
#row_wrapper {
position:relative;
float: left;
z-index: 3000;
}
#lower_bg {
background:url(images/header_bottom.png);
position:absolute;
bottom:0px;
height:200px;
width:520px;
z-index: 1000;
margin: -2px;
}
<div id="wrapper">
<div id="upper_bg">
<!-- ie fix for displaying empty divs -->
</div>
<div id="row_wrapper">
... content!
</div>
<div id="lower_bg">
<!-- -->
</div>
</div>
In IE (7,8 & 9) however the upper and lower_bg divs are invisible. Anybody knows how to fix this?
solved the problem. Indeed, the shown html in my question didn't reproduce the result. After a bit fiddling, I found out that IE was in quirks mode. I created the html via xslt and forgott to add the xsl:output tag and set it to html. After doing so, IE was fine down to version 7 with the layout.
Add a clear...
<div id="lower_bg">
blabla floating divs
<div style="clear:both"></div>
</div>
I've been trying to make this work for a while and it never seems to work out. I think its because my HTML structure is slightly different than the ones in the example. My problem is, on pages that are smaller than the viewport, the footer is not automatically pushed to the bottom, and the #main div is not extended to the footer.
Here's my HTML:
<html>
<body>
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
And here would be my basic CSS, without implementation of CSS Sticky Footer:
div#container {
width:960px;
margin:0 auto;
}
div#main {
background-color:black
padding-bottom:30px;
}
div#content {
width:425px;
}
div#footer {
position:relative;
bottom:0;
width:inherit;
height:90px;
}
To clarify: Lets say the background of div#main is black. Now lets say, on a page, there's only 1 line of text in div#main. So I want to make the #main area extend all the way down to the footer (which is at the bottom of the page) even when there isn't enough content to force that to happen. make sense?
And One more thing. The #main area has a different background color than the body. So the #main background has to extend all the way down to the footer, cause if there's a gap, the body color peaks through instead
Try making the footer position:fixed.
http://jsfiddle.net/QwJyp/
Update
I'm a little bit closer: http://jsfiddle.net/QwJyp/1/. Perhaps somebody can build off it. If you remove the line with !important defined, it allows the main with height:100% to show up. But there's still a lot of extra padding at the bottom of the div which I can't figure out. I'll continue later when I have more time. Good luck! Hopefully this helps with some direction.
Here you go: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
EDIT
Using the technique in the article above (tested - and works in fiddle):
HTML
<html>
<head>
</head>
<body>
<div id='container'>
<div id='main'>
<div id='content'>Hello</div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
CSS
html, body {
margin: 0; padding: 0; height: 100%;
}
div#container,div#main {
background-color: #333;
}
div#container {
min-height:100%; width:960px; margin:0 auto; position:relative;
}
div#main {
padding-bottom:90px; margin:0; padding:10px;
}
div#content {
width:425px;
}
div#footer {
position:absolute; bottom:0; width: 100%; height:90px; background-color: #ADF;
}
idea is to have #main with padding-bottom x, container min-height: 100%, footer after container and with margin-top -x
Try using with absolute position for the footer div
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
Make sure that body height is 100%
html,body
{ height:100%;
padding:0;
margin:0;
}
div#container {
width:960px;
margin:0 auto;
position:relative;
height:100%;
}
div#main {
background-color:black;
padding-bottom:90px;
}
div#content {
width:425px;
}
div#footer {
position:absolute;
bottom:0;
width:inherit;
height:90px;
width:960px;
}
I know the html is structured differently than what you're working with, but perhaps you can alter your core structure to mimic this (because it works): CSS Sticky Footer
It looks like this group has done a lot of research on the topic and have found this it be the best (maybe the only?) way...through many different versions.