I am working on a simple html webpage that contained a footer But the footer does not work correctly !
I want the footer be at the bottom of the page but ... !
and this is the problem :
here is a demo of my webpage ( sorry for the language ;) ) :http://gooloop.ir/dl/site/temp.html
Add overflow:hidden to .content.
The content was collapsing upon itself as it didn't have any defined dimensions, and thus the footer was placed over it.
.content {
width: 962px;
margin: 0 auto;
padding: 10px;
border-radius: 10px;
margin-top: 20px;
overflow: hidden;
}
It will work. Tested in the dev tool.
Related
I'm trying to figure out how to get the footer to stick to the bottom of the page in the css of http://bit.ly/138xOAB
I've tried alot of things which were said in tutorials, such as:
the position absolute,
bottom:0,
and min-height of the container 100%,
height of the body 100%,
But none of those things turned out well.
You can see the HTML and CSS by inspecting the website. I can't get the proper code over here.
Can someone help me, maybe there is something wrong in the HTML?
The problem with you footer's position: absolute; is that it will hide the other elements behind it.
Your footer can be best viewed if you remove position: absolute; so as to show all elements and add margin-top: 20px; for some gap in between the footer and the element before it..
Try it.
EDIT:
If you want the footer to be always float on the screen, use the following CSS (comments inline):
.container {
max-width: 1200px;
margin: auto;
padding: 0px 3%;
margin-bottom: 250px; /* so that all content is visible */
}
.footer {
background: #efefef;
position: fixed; /* so that the footer floats */
overflow: auto;
bottom: 0px; /* float at bottom */
padding-top: 20px;
padding-bottom: 20px;
height: 180px;
width: 100%;
margin-top: 20px;
}
Remove "position: absolute" and "bottom: 0" from the .footer class. I think that fixes your issue. And add a small margin above the footer so there is a small space between the content and the footer.
Before I start I'd like to note that I'm very new to HTML and I am self teaching. I just started recently and still have much to learn.
My issue seems simple yet I can't seem to figure it out. Everything else on the page is fine, it's just the footer that's the problem. At full screen the footer stretches the full width of the browser window:
But when shrinking it it accepts the window's dimension but it doesn't center it on the window:
This is the code I'm using in the style sheet for the footer.
div#footer{
background-color: #37184c;
padding-bottom: 307px;
text-transform: uppercase;
text-align: right;
}
It is inserted outside of the page wrap which is set to 940px.
div#page-wrap{
width: 940px;
margin: 0 auto;
}
The page wrap is where all of the content above the footer is held.
Is there any way for me to get the footer to continuously stretch to the edge of the screen? Or should I remove the #page-wrap and try to center the content some other way?
Your CSS For Your Footer As Follow:
#footerwrapper {
width:100%;
padding-bottom: 307px;
text-transform: uppercase;
text-align: right;
}
#footercontent{
margin-left:auto;
margin-right:auto;
width:940px;
}
<!--HTML MARK-UP-->
<div id="footer">
<div id="footercontent">
<div>Your Footer info</div>
</div>
</div>
This is great because it will also set your footer to match your pagewrap width:940px; and it will keep all your content center with your pagewrap. Hope this helps.
You can try width: 100% on the footer div but without seeing more code, it is hard to fully diagnose.
Also consider using a CSS reset which will remove default values set by browsers that can make formatting/layouting a pain.
http://www.cssreset.com/what-is-a-css-reset/
Thank you everyone for the help! I actually just now came up with a solution:
div#footer{
margin: 0 auto;
background-color: #37184c;
min-width: 980px;
padding-bottom: 307px;
text-transform: uppercase;
text-align: right;
}
I believe the issue was the due to the fact that the main content area has a fixed:
div#page-wrap{
width:940px;
margin: 0 auto;
}
It's not dynamic at all so essentially IT was what was hanging off of the edge. Setting a minimum width for the footer prevents this blemish from occurring and meets the edges of the window.
Thanks again for the help!
I was trying to make my home page have a 2x2 grid of images.
There was a thread with a similar question already. The answer was to include this code:
#home_page .canvas {
max-width: 590px;
}
I did this and it kicks my footer over to the left. I went into the CSS and tried under every footer mention I could find to include text-align: center; code although to no avail. I also tried playing with the 590px, but it moves the images over and no longer centers them.
Any help is appreciated.
Here is a link to my page: http://johnathonpowers.bigcartel.com/
Please remove the
float:left;
property from the
#site_footer footer {
}
CSS class and it should all work fine for you.
In essence, you #site_footer footer class should look like this:
#site_footer footer {
width: 100%;
min-width: 900px;
clear: both;
margin: 0 auto;
padding-bottom: 0px;
text-align: center;
}
You #site_footer footer class currently looks like this:
#site_footer footer {
width: 100%;
min-width: 900px;
clear: both;
float: left;
margin: 65px auto 0px;
padding-bottom: 10px;
text-align: center;
}
What can be the reason to have both width and min-width properties (that too with wide differences in values). Keep one width property value (either width or min-width). Similarly, why float after clear? Understand that clear is used to remove any previous floats. If you want to continue floating, there's no reason to write clear: both
Hope this helps!!
EDIT: Please see the screenshots below!!!!
#site_footer footer
#site_footer footer 2
If you remove the float:left, your footer div will be centered.
In case you can't do it, you can overwrite the float:left property in your CSS file as such:
#site_footer footer {
float:none !important;
}
I am making a fullscreen website, and I would like to have a scrollable div to display text content ; here is my page : http://www.jeremy-dutheil.fr/barconniere/pages/enterprise
You can see that the scrollbar appears on the body, but this is not what I want ; I would like the scrollbar to appear only on the div content, and not on the body.
Any ideas ?
Thanks
Apply this style in your global.css
Line 109 I think, change your style in your #enterprise #textContainer {}
Like so...
#enterprise #textContainer {
background-color: #FFFFFF;
height: 445px;
margin: 20px auto;
overflow: auto;
padding: 20px 0 20px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
This code is just to show you how your div with your scrollbar will look like. You may further customize it according to your liking.
The style code above shall output a page similar to [BELOW IMAGE]. Look at that scrollbar, It's cute.
on my website it is a div based layout when the window is reszied everything is pushed together. Such as images overlap or are moved below each other and divs also overlap each other.
How can I get it to scroll when the content of the div is greater than the window size, similar to facebook if you resize the window it prevents anything overlappting and just makes the user scroll?
body
{
background-color: #B0B0B0;
color: #ffffff;
margin-top: 0px;
margin: 0px;
}
#header
{
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
}
#content
{
width: 80%;
height: 800px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
padding: 30px;
}
<div id="header">
[Header]
</div>
<div id="content">
[Content]
<img src="image1.png" /><img src="image2.png"/><img src="image3.png" />
</div>
The html is like that but obviously with more content
Hope I haven't made this too confusing, thanks.
Just add overflow:auto; to your div.
You can also use the following if you only want x or y scrolling
overflow-x:auto;
or
overflow-y:auto;
use the overflow:scroll; to enable scrolling in the DIVs
You must add white-space:nowrap; to your body tag.
I believe you may want overflow: auto;
Here's a comparison between auto and scroll.
add the style
overflow: scroll;
to #content
This answer is pretty late, however I stumbled across this question, as I was having issues on one of my pages, where I have this Page with 30 odd inputs of various types, that are split between two tables. I was unable to scroll to see about 10 or so inputs at the bottom of the page, and could not even scroll left to right when adjusting the browsers width.
What solved my issue was:
html, body {
overflow: visible;
}
This activated my X and Y scroll bar.
I had an issue with my footer not adjusting when scrolling, it instead would just stay fixed where it was situated before scrolling. this was due to my master CSS having the footer's position set as absolute. Simple fix, just creating a new style element in the page and added
footer {
position: fixed;
min-width: 100%;
}
I hope this helps anyone looking for a solution.
As stated by user3726345 , the best option to use is the
html,body {
overflow: visible;
}
using
overflow: auto;
dosnt give the best output. then you can further adjust your footer codes to your taste.