I am struggling with an issue I can't seem so solve by myself. Perhaps you can shed some light on it. The issue is concerning a responsive website using Bootstrap 3.
The issue
The main content is horizontally and vertically centered. The header with navigation is fixed to the top and the footer is fixed to the bottom of the page. Perfect!
Check http://www.domains.cloudlabz.nl in a desktop browser for a working example.
The problem occurs when the main content gets too high. The header and footer do what they're supposed to do: stick to the top and bottom. But when the main content gets high, that's - in my case - unwanted.
Check http://domains.cloudlabz.nl/domains.php to see what happens or decrease the height of your browser window.
You'll see the header and footer overlapping the main content. That's a no-no for me.
What I would like
I would like the header and footer to stick to the top and bottom of the page like they do now, but when the main content gets (too) high I would like the header and footer to scroll with the main content. Like if they're stacked on top of each other.
Best regards, Peter de Leeuw
Related
I have a footer styled for my Wordpress site, which is not appearing to reach the full width of the site on mobile. Also, I am always able to scroll width ways, as if the site is wider than the mobile viewport. This only happens on mobile portrait, not on desktop or tablet.
I have all widths set to 100% (the header, the body, the footer and several others) but it seems the footer width renders as 1333px width whereas the header and body widths render as 1349px (as in inspect dev tools on laptop).
I have no fixed widths for any elements set in pixels of over 300px.
The footer is placed outside of the main and the main container but within the body.
I don't think any of the elements within the footer are the problem, as I have removed them and replaced them but the same problem still exists.
Photo included: Gap to right of footer
This problem maybe because one of your HTML tags on the entire webpage (out of the footer) is bigger then the screen
This problem not from the footer,please check the other parts of the webpage
Hi Hazem and thank you for your reply again. Update: I now know what was causing this problem. A left margin set in pixels on my content div that was set to 80% width was adding to the gap to the right of the footer, but only on mobile view. I then realised that my media queries were not working but I have now sorted that out, hence I have sorted the problem.
Thank you for your help.
I have been looking for tutorials on this for a while now and am coming across a problem. I have a layout with a fixed header at 100px in height and a fixed footer at 50px in height. In my content, I have a menu on the left at 200px wide and content on the right that fills the rest of the screen. My header, footer and menu all have styles applied for background colours and borders.
What I want is for my footer to remain at the bottom of the window, or at the bottom of my content, if the content is longer. I want for the menu to be the same height as the content, so that the styles I have applied will remain intact. What I get is either the footer sticks to the bottom of the content because the content is shorter than the menu, or there is a gap between the bottom of the menu and the top of the footer.
Every tutorial I have found fixes this, but requires the menu to have no background (it takes the background styles from the <body> tag. As I said, the styles I have applied are attached to the menu. Is there a way to fix this?
UPDATE: My source can be found at http://jsfiddle.net/53SZd/3/. That is what I have now (apologies if the floats cause all manner of headaches), but if there are ways to have it looking how I want, I am very open to suggestions.
UPDATE 2: I think my way of explaining this is wrong. I have uploaded some images of what I want to my Google Drive that should explain what I want.
Whilst I do sincerely appreciate the help that I am getting here, there is always one caveat that appears. Many thanks to Waz for his help, I do really appreciate it, but I am coming across one issue or another with each answer. I never realised that getting the effect I want could be so hard -_-"
seems that u might be using float property on the menu, if that is the case you would have to clear float with the footer or a div, but seeing the codes would be great help for your answer
one way to do it is to put a margin-left on your content of 220px (200 for the menu +20 for it not to be just aside the menu)
had the same problem, this solved it.
for the footer, the solution of james is the best ( put clear : both on your footer)
here is how it works : http://jsfiddle.net/53SZd/19/
EDIT : I understood the prolem was for the content.
give your menu top= 111px(100 size of header, 11 for padding) and bottom=51px (50 height footer,1 border) and your footer bottom=0px;
I've completely at logger heads with how I can get this footer to align with the bottom of the sidebar if zero content is in the space between the header and footer.
Sticky footer is not the solution because I don't want it to be at the bottom of the window. But inline with the bottom of the sidebar instead.
Here is an image of what it should look like but without the coloured blocks there at the moment they push the footer down where it is now.
I can't provide much code as this is on my local server, and is segmented and broken down into different files for wordpress.
screenshot http://s3.amazonaws.com/awesome_screenshot/2110547?AWSAccessKeyId=0R7FMW7AXRVCYMAPTPR2&Expires=1368128529&Signature=GjSmfhU6%2BZoYmSUj6oMEcvNXTEs%3D
as you can see the above screenshot is how I want the sidebar and footer to be with no content there.
Here is another screenshot showing my current problem, you can see how it latch's on to the bottom of any content on the page and sticks just below it.
http://awesomescreenshot.com/015198m642
Thanks in advance.
The sidebar needs a float:right; then create a div between sidebar and footer with clear:both;, have the css for your footer include margin-top:-xx (whatever pixels the footer height is). You might also need to throw a position:relative on there.
http://jsfiddle.net/uuTDG/
Fixed this by adding position relative to my container, then adding position absolute and bottom 0 to my footer.
Thanks anyway for the help
Hello i'm trying to implement a footer that sticks to the bottom of the page no matter the content size here 22twenty.com/wordpress and its not working the footer is for some reason sitting at the bottom of the gradient wrap not the page, i used this tutorial: http://www.wordimpressed.com/wordpress/put-a-css-sticky-footer-in-your-wordpress-theme/
If you need anymore info just ask
Thanks
Denver
Playing around with your page and CSS I found you hadn't quite completed the tutorial based on the link provided. The following is what was needed to be changed:
Move the footer tag outside of the container div.
Remove the margin line from the footer CSS rule.
These two things will move the footer to the bottom right of the page.
Homepage
About page: /about.html
CSS: /saucy.css
I'm sure I'm overlooking something obvious, but I can't seem to find it.
Both of these pages stem from the same HTML skeleton and use the same CSS file for formatting. Why does the About page centre differently to the homepage?
Thanks!
They center the same for me, but I suspect that for you it's because of the scroll bar. The home page is taller, so the scroll bar on the right pushes everything left. The about page has no scroll bar so it's actually in the middle of the screen.
Your Homepage has enough content that it gets a vertical scrollbar, but your About page does not. (The same thing was going on here: CSS pages not equal even with the same css-file.)
Here are some options to consider:
Add overflow:scroll; to each page's stylesheet, (on the body element, for
example). A scrollbar will always be
rendered even when it's not
necessary, and your layout will not
move around.
Don't center your
content; specify a left margin in ems
or pixels.