I'm using css sticky footer from http://www.cssstickyfooter.com/
Why do we need: #main{overflow:auto;} and #footer{position: relative;}?
Seems like it works without it (I'm not talking about Opera and IE fixes).
overflow:auto; will simply add the scroll bar if the page is longer than what can be displayed based on your screen height. I've used it before and believe it ensures your footer stays visible at the bottom of the page when you scroll.
Have you tried it on a page that is longer than the screen can display to see how it behaves?
Quote from cssstickyfooter.com:
No Need for Clearfix Hack!
Many CSS designers will be familiar with the Clearfix Hack. It solved
a lot of problems with floating elements. A previous version of this
Sticky Footer solution used it. Instead, a more modern and easier to
code solution is the overflow statement. We apply it to the main
to help get the footer to stick in Chrome. It also solves issues that
come up when using a 2-column layout where you float your content to
one side and your sidebar to the other. The floating content elements
inside the main can cause the footer to become un-stuck in some
browsers.
You might not need it but if needed overflow:auto makes an element act as a container that expands itself to contain it's floating elements (if any exists).
If you use firebug you can see what I mean by using it with overflow and click on the container element#main. It will stretch over the containing elements.
Without it the container element stays as small as possible and doesn't "contain" the other elements.
Read more here:
http://www.quirksmode.org/css/clearing.html
Related
I am pretty new to HTML and CSS, and one of the things I have read is that you should keep your <header> and <main> tags separate. When I do this, however, it makes it harder for me to align content on a page the way I want. Currently I'm having issues with the content of the main overlapping with the content of the header elements, and they are both occupying the same space. I tried setting the :root to display: flex;, and then flex-direction: column;, but this didn't seem to prevent the elements from overlapping. I would like them to behave as if the header and main were both in the same flexbox and aligned in a single column, but so far I haven't seen anything addressing this issue. I have attached a Codepen link of what I have so far (the borders in the CSS were just to help me visualize where things were going wrong).
After continuing to mess around with some of the values in the CSS selectors, I found that the one causing the issue was the position: fixed. I knew that I wanted the nav-bar to remain at the top of the screen when scrolling, but I didn't fully understand the implications of having other elements in the same page as a fixed element, without using a relative parent.
When I used position: fixed; it caused that element to essentially be disregarded from the normal flow of the page, and other elements filled the top, making them appear stacked on top of one another. In my particular case, I chose to go with sticky instead, as this accomplishes the same objective without complications.
I'm trying to use a sticky footer, but it seems to having a conflict with my css, I'm following this tutorial, but I want to know why the footer is in the middle of the page, what do I have to do to fix it.
My code:
jsfiddle.net/q2Vuq/
The reason why you're seeing this strange behaviour with the sticky footer is because of your usage of position:absolute; on a number of your elements. Namely, the ones wrapped within the #navigation div.
Take a look at this (this JSFiddle just illustrates the problem more clearly):
I've given the offending elements all a background colour (as well as the body), so you can see that these elements are actually causing the scroll bar to extend beyond the height of the body. Absolute positioning actually takes them outside of the layout - meaning they don't cause their parent #navigation to expand, which in turn does not cause its parent .page-wrap to expand, which ultimately results in the footer not getting moved down. The footer gets put to the bottom of the body (as a result of the sticky footer CSS), which isn't quite low enough since the absolute-positioned elements extend even further below (as they are ignored by the body).
So, with that in mind, how do you fix this behaviour? Unfortunately, your sticky footer relies largely on the assumption that all content will be figured into the layout above it, or at least that the wrapper element above it will be tall enough to account for all its contents. This makes your use of absolute positioning hard to keep.
The best solution is probably to remove your current usage of absolute-positioned elements in your document, and rework how you're going to place your elements. Since I don't know what design you're actually aiming for, I can't provide an example of this. An alternative is to place an internal wrapper element inside of .page-wrap, with a min-height set such that it goes below even the lowest absolute-positioned element. However, this second method isn't too flexible, and I wouldn't recommend it.
If this isn't what you were looking for, or need more assistance in this particular matter, let me know and I'll be happy to help further. Good luck!
I'm making a Wordpress theme with PHP, HTML and CSS.
My footer automatically floats down under the white content block when more text is added.
Now, I want to add another image that has to overlap the footer and also the white content block.
But... I want it to float down when more text is added, like the footer does.
Here's the link to make my question clear:
website
So, I want the image with the papers and the pencil to overlap both of the div's footer and the white content block. And it also needs to float down when more text is added.
oh, and I'm also having an issue with the outer edges of my footer, as you can see there is space, but the footer has to be full screen at the width.
-Thanks
Since the footer already aligns and "floats" as the content changes, the simplest solution would be to take advantage of this and place it inside the footer. From there you can position it partially outside with absolute positioning on the illustration and relative positioning on the footer.
Here's a proof of concept: http://jsfiddle.net/eliland/Qp76P/
Before going into the answers, I advise you to do 2 things:
validate your CSS, because from a very fast overview I spotted a typo at line 25 min-heigt which must be min-height
use CSS resets before any custome CSS. For this, check http://meyerweb.com/eric/tools/css/reset/
Personally I use normalize.css from http://necolas.github.com/normalize.css/
One more thing, and this is my opinion: there are plenty of cleaner themes out there which you can use to build your child theme. They include the latest in modern Web techniques, SEO, etc. E.g. Thematic, twentytwelve, twentyeleven, etc. And for free ...
I have been trying for 2 hours to get my footer to stay at the bottom.
I have been trying "Matthew James Taylors" technique, but no luck.
Anyone see what I am missing or doing wrong?
Here is a Live Example : http://glustik.com/essex/index.html
Any help would be GREAT!
I would attached the CSS Code with the { } but it always breaks for me.
I feel like the CSS to fix this will still be problematic, I would be tempted to rewrite the whole thing: HTML markup and CSS, otherwise I suspect there will be more trouble down the road.
Here are some things that are most likely giving you trouble:
Duplicate id values (as mentioned)
Unnecessary absolute positioning
Hard-coded height values on several divs
Unnecessary use of "clearfix" divs
Overuse of negative margins to compensate for padding on other elements (always problematic)
Minor but relevant: use of classes like floatRight, just as bad as using inline styles.
I think in general, instead of trying to control the positioning and height of everything - just let the normal content flow dictate it. Naturally, the last element in your markup (footer) should be on the bottom without all these over-thought restrictions.
Best of luck!
EDIT: Apparently I've come off as unhelpful, so I felt I should add a direct response: For a quick fix, to simply get the footer on the bottom:
Remove the height and bottom padding from #mainBody
(tested in FF4 and IE8). There will still be some padding issues within the footer, but that can be resolved in a number of ways depending on how you'd like to approach it. Once again, good luck with your project.
You have the footer positioned absolutely in #container, which is positioned relatively. therefore, its being positioned at the bottom of #container.
try moving it out of #container, or remove the relative positioning from #container
Because all of the content inside your main container (#mainBody) is floated, the container's only way to determine it's height is via the "height" property, which is set to 100px;. The footer is correctly rendering right below the 100 pixel height of the main container.
You have three options:
you can either properly clear your main container so that its height is dynamic based on its content using a clearfix like this
or you can set the height of the main container to something larger. I changed it to 700px and the footer rendered well below the main body.
or you can remove the height altogether, which will probably be the best solution in the long-run. Thanks to #Gaby aka G. Petrioli for pointing this out.
I've been doing this a long time and have never heard of this method. That doesn't make it bad, but the currently accepted version in my circles comes from Ryan Fait (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/)
If you load this up in Chrome and disable the position:relative from the container it does properly glue the footer to the bottom of the page. That signals a problem to me, because it's contrary to what the tutorial says. Regardless, it accomplishes your goal.
You should take at least a look at Compass. It makes CSS so much easier. For your particular question, take a look at:
http://compass-style.org/reference/compass/layout/sticky_footer/
Make the following changes and it rendered fine in Chrome for me:
remove bottom:0; from #footer
change padding-bottom:167px; in #mainBody to the desired location (I used 455px and it looked pretty good)
Is there a way to target html elements that I don't want to affect the width of the page?
In other words, those elements wouldn't trigger the horizontal scrollbar, if they were to leave the browser box.
You could use the CSS overflow: hidden to keep them from affecting your layout.
You can use overflow:hidden on the elements you don't want the scrollbar on.
You can also use overflow-x:hidden or overflow-y:hidden Reference
Checking other sites structures, the solution seems to be pretty simple:
Wrapping everything in a relative positioned container(with overflow:hidden) lets the container grow with the contents of the page, while not letting the elements show out of it's borders.
Example:
http://jsfiddle.net/LnNQJ/1/