On my site here, the footer is white at the end when the padding-bottom isn't enough and wondered if someone could help diagnose.
Here's the footer CSS:
#footer {
color:#E0E0E0;
max-width:1280px;
margin:0 auto;
padding:1.45em 2% 0.4em;
}
And I'm wondering if the right-nav equal column CSS is affecting it:
.right-nav {
float: right;
width: 29.4%;
border-left: 1px solid #Dddddd;
padding-top:2em;
padding-bottom:10040px;
margin-bottom:-10000px;
}
Any ideas would be great.
*Update: this page here has a huge gap too, which is why I'm wondering if the right-nav has anything to do with it.
Sounds like you want to use a sticky footer.
http://ryanfait.com/sticky-footer/
This is the best tutorial I've found on the web. You may have to do some tweaking to your site's structure, though.
What this does is essentially forces the footer to always be at the bottom of the page, no matter what the size of the content. If the content is large enough, it sits at the bottom of the page as it should.
if i understood you right
then you need to add overflow to your footer
#footer
{
overflow:hidden;
}
Using this should work. Here is a jsFiddle example of it in action.
#footer {
bottom:0px;
position:absolute;
}
Related
I'm trying to have the div expand to fit the content contained in a <section> tag for my HTML and CSS page. The thing is that it cuts off midway through the content and I can't get this to work.
So far I've experimented with setting overflow:auto but to not much success - the inner container scrolls but I'm looking to make the whole page scroll.
Can someone have a look and help me out? JSFiddle: http://jsfiddle.net/6xgT5/
Just get rid of height:100% on #mainContent and replace it with float:left. That should do the trick. Let me know if that resolved the issue.
For the footer, git rid of position absolute and replace it with float:left, width:100%:
footer {
float: left;
background-color: #CAD0C8;
border: #000 1px;
width: 100%;
height: 45px;
text-align: center;
padding-top: 5px;
}
Thats because you are fixing #footer and it makes to float outside a content layout. So you need just add to the section padding-bottom :45px /*footer height*/
Add overflow:auto; to #mainContent.
As you can see by this fiddle here in white middle column (it is supposed to be coloured but jsfiddle wont for some reason) there is padding either side that leaves a horrible white strip down each side. I can't seem to find what is causing it though. Can anyone here have a crack at it? It does make it hard to see because obviously the color is the same but here is what it looks like normally. I need the 3 columns do be touching is all. Thanks for your help, I'm sure it's nothing too difficult.
http://jsfiddle.net/d9aSS/
body {
margin:0;
padding:0;
border:0;
width:100%;
background:#fff;
min-width:600px;
font-size:90%;
}
Stack overflow wanted some code with the link, please ignore.
.colright, .colmid, .colleft {
float: left;
position: relative;
width: 100%;
}
Remove the float: left; line to correct this... Hope it will help you... If any doubt ask...
I am trying to make a footer that stays on the bottom of the page, so when you scroll down it should stay there.
How can I do this the best?
PS: I do not have any code yet, I am just looking for how I can do this the best way possible.
Use the below code on the Footer to make it stay fixed at the bottom.
For Instance,
The HTML:
<div class="footer"><!-- Your footer code should be here. --></div>
The CSS:
.footer{
position:fixed;
bottom:0;
}
This will make the footer to stay at the bottom keeping it fixed.
Hope this helps.
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
This CSS can help you.
For better explanation refer to this
http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/
This blog can also do the needful
http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/
Ok, i've tried LOTS of solutions offered in StackOverflow about this issue, but none of them have worked. I guess this is a tricky thing and needs a tricky solution.
From what I've seen, each problem is different with this 'occupying' the body thing, so I guess I'm here with a different one.
I really need help here, guys.
Here's my problem: http://jsfiddle.net/Ff49Z/5/
And heres what I want: When the "wrapper" div does not fulfill the body, I want the div to expand to the bottom of it anyway. So, in the fiddle, what I'm trying to achieve is not a gray spot on my layout. As you can see, wrappers are 100% height (that is one common solution offered in SO for this problem) and that does not help.
It is this div that does not expand to fit the wrapper:
div#middle {
padding:10px;
margin:0 auto;
height: 100%;
}
BTW, when overscrolling, footer sticks and wrapper scrolls. That is the desired behaviour, and it works flawlessly.
I simply added:
div#middlewrap {
width:100%;
position:absolute;
margin-top:60px;
}
and works as you asked. EDIT: THIS IS WRONG - correct answer below
I was about to give up when I decided to rewrite the css from scratch, and it came out simpler than I expected. I simplified your CSS to the bones and added some cool overflow-y:auto; to the middle wrapper plus some sweet position:fixed; to the header and the footer. Then I adjusted the padding to the #middle content div and added a height:100%; to the body and html(so that every child of body can be successfully set to height:100%;) and that's what came out:
body, html {
margin:0;
height:100%;
}
div#headerwrap, div#footerwrap {
position: fixed;
left: 0;
right: 0;
}
div#headerwrap {
top: 0;
height:64px;
background-color: red;
}
div#middlewrap {
height:100%;
overflow-y:auto;
background-color: blue;
}
div#middle {
padding-top:70px;
padding-bottom:35px;
}
div#footerwrap {
bottom: 0;
height:32px;
background-color: green;
}
That's all the CSS you need. Pretty cool uh?
HERE IS THE FIDDLE
Note: I respected your syntax, which is also correct, but it's not necessary to write DIV before every #ID in your css. Deleting those selectors will dramatically decrease your css file weight in bigger projects.
Cheers.
Make all parent elements as height:100%:
body, html, body>div#middlewrap {
height: 100%;
}
div#middle {
min-height:100%;
}
Impossible solely with CSS. Need javascript involved. Take the client height - (header + footer) = min height for the content
Using % height doesn't work because the parent doesn't have a height defined.
I wanted to use "full width" stripe on my footer, but aparently it doesen't want to work. here is the example of what I have right now.:
I want the footer to do a repeat-x over its div. So, going off until the end of the screen (like its done on the upper part). This might be something extremely simple, but I'm fairly inexperienced with CSS styles, so please lend me a hand.
[EDIT] The footer div is inside a wrapper. The edges of the div are aligned with the wrapper width. My question is if its possible for it to "overlap" the limitations, until the end of the screen.
I would also like to give it a specific position, not variable with the end of the article. I understand that I need to use it as position:absolute, but it always apears right after the header, even if I give it a Y position. There is probably something simple I'm forgetting.
Here is the existent code I have in my Footer class:
#footer {
background:url(wp-content/uploads/2012/06/whitestripe.png) repeat-x;
position:relative;
width:100%;
clear:both;
text-align:center;
line-height:16px;
font-size:11px;
}
#footer a {
padding:2px 3px;
color:#004a6a;
text-decoration:none;
}
#footer a:hover {
color:#105a7a;
}
Thank you.
Marco Roberto.
Move the footer element outside the main wrapper so that it isn't constrained by it. Inside the body will do fine for example.
Then change the css:
#footer {
position: absolute; // or fixed if you want it to scroll along
left: 0;
right: 0; // or width: 100%
bottom: 10px; // change to the value you want
}
Hey now define in your css body and html width
as like this
html, body
{
width:100%;
}
background-image:url('paper.gif');
background-repeat:repeat-X;
Try this
http://www.w3schools.com/cssref/css3_pr_background-size.asp
This will help you to study...