I have read a lot on google and here and I can't find a solution, I don't get it why do I get the scroll bar and I need to scroll down in order to see the footer, at this moment I don't have any content and it's not necesary to scroll down, as you can see here: [URL REMOVED], If I remove margin-top fro the logo than it works, but I need that margin-top there.Can you guys help me please to find a solution.
Best Regards.
You gave body a height of 100% and #wrap a min-height of 100%, so the footer is pushed outside of the viewwindow (which is what 100% height is). Try removing or lowering the value of min-height on #wrap and the footer will come up.
Edit:
If you're going to use the css from the page you linked, you can't add any vertical margin, padding or borders on anything. You are doing this on #logo and that's what's messing things up.
It seems you're doing this because you want the content to have a certain background, but you don't want this behind the logo. You can solve this by adding another div inside #wrap that wraps the content and give this the background. Leave the header white.
Summary:
Remove the margin-top on #logo.
Change the margin-bottom on #wrap to -54px.
Add a div for the content within #wrap for the background.
That should solve your problem.
Related
So, I have a navbar on the top, footer on the bottom and a big image in the center. I placed everything using margin (margin-top: 0 for nav, margin-bottom: 0 for footer and margin: 3% auto for image. The image is centered on my page and everything is allright. However, when I set position of nav bar to fixed, the margin for image seems to count from the beginning of page instead of the end of navbar (it causes my image to overlap with navbar instead of being in between of footer and margin). The only way I know to fix it is making a second, invisible div with the exact same size as my navbar, but I believe it's not the most practical way.
I don't know if putting HTML/CSS code is necessary there, I think I described everything important.
Thanks in advance for help
try position:sticky. it works best if you have fixed height of element.
Setting position: fixed removes the element from the document flow. One possible solution is to add a container for the content, in your case a container div for the image, and set a fixed top margin or top padding on the container for the height of your navbar.
I have a fixed footer at bottom, When i turn on developer options it overlaps my content div. Also, When i open this in tab it overlaps and causes problem to insert information in the form.
The way to avoid this could be z-index. But, Is there anyway to avoid it altogether?
See this image:
Appreciate the help!
I think you should add padding-bottom to your body, the value of padding-bottom should equal with the height of the footer.
Struggling a bit with HTML positioning. I'm sure it's a pretty simple problem, but just can't crack it.
Please see fiddle: http://jsfiddle.net/HMyXW/2/
Basically, I am trying to position the yellow div (#logo) above everything else, so it will push any other content on the page down, even if the screen is resized vertically.
I've tried messing with z-positions, etc. but am not having much luck.
I suggest remove all the fixed positions if it is not necessary and add a outer div to wrap all the child divs.
Check this DEMO
If it is necessary to use the position:fixed to the #logo then you need to check the height of the #logo and give the same value as margin-top to the content div.
Your #logo has position: fixed; which means the element is removed from the normal page flow.
I am having some trouble with the layout of a website that has a header, content, "sticky" footer, and a sidebar. The sticky footer, header and content combination is not a problem by itself, but I can't for the life of me figure out how to add a sidebar that goes from the header right down to the footer without messing up the "stickyness" of the footer.
The way I am approaching it now involves absolute positioning. I basically make a header div (height: 71px; top: 0px;), a footer div (bottom: 0px; height: 30px;), and a content div (top:71px;bottom:30px;). I then float the sidebar left inside the content div and make its height 100%, and add another div (call it "view") next to it for the actual site content. This makes sure the sidebar is nicely from the top to the bottom, and the footer is normally at the bottom of the page.
However, problems arise with this approach when the window is resized, especially so when the content is too large to fit in the "view" div itself. This results in the footer cutting off the content, and scrolling down makes the footer move up in the window. I would like to achieve a footer that behaves like this, but also have a sidebar that ALWAYS stretches from the header to the footer of the page.
If anyone could think of a way to add a such a sidebar to the page linked above or has any ideas on how I could go about tackling this problem, it would be greatly appreciated. Thanks beforehand.
Do you think you could post some example HTML and CSS you have besides just the div height and positioning?
What I was thinking is you could throw another <div> inside the sidebar <div> and set the margin-bottom or padding-bottom to 30px. I'll work on a jsFiddle for you.
You can always put an overflow: auto on your view div.
http://jsfiddle.net/dzRZd/
Edit:
With fixed positioning instead:
http://jsfiddle.net/ekSvQ/2/
Whenever my website is viewed with a resolution that is insufficient to display the full page, a horizontal scrollbar is added. The problem is that my 100% width div with background image does not apply this background image to the portion that extends beyond the scroll bar.
This same issue is actually appears here on Stack Overflow as well. If you shrink your window small enough that you have a horizontal scrollbar, you can see that both the header and footer div areas do not extend the background image/color.
One way I have figured to resolve this is to set the header/footer div to fixed but then the content past the end of the div is lost :-(
Anyone have any suggestions or a workaround? ty!
When you set an element to 100% width it will have the same width as its parent element. The body tag's width defaults to the width of the viewport. According to the standard, when an elements contents is to big to fit in it, it will overflow. This is what you're seeing.
To get around this, set the min-width on the body tag. Something like the following, obviously change the width to whatever works for you:
body {
min-width: 960px;
}
Surly if you used something along the lines of
body{
background: url("yourdir/yourimage.jpg") repeat repeat;
}
Instead of having a background div? It'd be helpful if you also added the code for the background div
This margin is a browser scrollbar that appears during resizing and makes viewport smaller. This can be easily fixed by adding hidden overflow to body. Check #242684