I'm trying to publish my portfolio site and I'm almost done, but I'm having a problem with my sticky footer covering content when there's enough content to need to scroll down. I've tried messing with padding and margins all afternoon but I still can't seem to get it the way I want it.
Basic HTML skeleton:
<body>
<header>
<nav>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
</li>
</ul>
</section>
</div>
<footer>
</footer>
</body>
Footer:
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
font-size: 0.425em;
text-align: center;
clear: both;
padding-top: 10px;
color: #ccc;
border-top: 5px solid #cc7a00;
}
Any help would be appreciated!
After inspecting the HTML on the page you mentioned above, it looks like you might have some un-cleared floats. You can read more about floats and why they need to be cleared here: https://css-tricks.com/the-how-and-why-of-clearing-floats/.
The short answer is the wrapper isn't increasing its dimensions to encompass its children because of those floats. If you inspect your page using dev tools, you can see the wrapper essentially has no height. That means adding a margin to it isn't really going to do anything.
If you were trying to add margin and padding to the footer itself, that won't work either since you're using position:fixed. You've told it to stick to the bottom of the page and not affect the other content on the page. It wouldn't make sense to let content scroll underneath the footer and still let it have a margin that pushes away other content, right?
There are a bunch of ways to solve this problem. Here's one-
To solve your float problem, you can use the overflow:auto trick:
#wrapper {
overflow:auto;
}
Read more about overflow:auto and floats here: Why does 'overflow: auto' clear floats? And why are clear floats needed? Please note this doesn't really clear the floats but the effect is that the wrapper height will respond to its children which is what we really need here.
Then adding some extra margin on the bottom of the wrapper div to account for the height of the footer should work:
#wrapper {
overflow:auto;
margin: 0 auto 100px auto;
}
The margin property above sets the margin-top to 0px, margin-right to auto, margin-bottom to 100px, and margin -left to auto. I suggested this becuase the page you linked to already had margin: 0 auto; (margin top and bottom 0, and margin left and right auto) to center the wrapper in the page. Otherwise, if you only needed to adjust the space at the bottom you would use margin-bottom: 100px;
Try adding
padding-bottom: 97px;
to your HTML element
EDIT
html { padding-bottom: 97px; }
97px is the height of your footer.
On your <div id="wrapper"> add to the CSS: bottom : someValueMatchingTheFooterHeight;
Related
This problem arises when you are using a position:fixed top nav bar: Since the nav bar is out of the document flow, the initial content that you put after it will be hidden by the nav bar itself. This fiddle shows my solution which uses an extra spacer div and padding-top:
http://jsfiddle.net/MFwJT/
html
<div class="fixednav">some nav stuff</div>
<div class="navspacer"></div>
main content which should not be covered by nav
css
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { padding-top: 30px; } /* This works */
2 questions
Is there a better solution?
If you change padding-top to margin-top, the nav bar behaves as if the spacer came before it rather than after it. I'd like to know why this happens.
To clarify question 2, margin-top produces this:
whereas padding-top produces this (the correct behavior):
Is there a better solution
IMHO, better solution would be to avoid a fake spacer div navspacer and instead, go with the span as you can easily achieve your target with a single div, using line-height and without a fake div
Example Fiddle
CSS
.fixednav {
width: 100%;
height: 30px;
background: #999;
line-height:90px; /*this is the key here*/
}
.fixednav > span {
position:fixed;
display:block;
width:100%;
line-height:30px;/*this is the key here*/
}
HTML
<div class="fixednav">
<span>some nav stuff</span>
main content which should not be covered by nav
</div>
Question 2
If you change padding-top to margin-top, the nav bar behaves as if the spacer came before it rather than after it. I'd like to know why this happens.
when you give the padding-top: 30px;, it is applied to the inside of the content area, making the whole div height (30px + if anything is in content), check this demo to see it
when you give margin-top: 30px;, it is applied to the outside of the content, demo and the contents overlap as FIXED position divs do not follow the document flow but the viewport flow!!
The problem here is that you fixed the position of the fixednav but not the navspacer. When you do this, the fixednav and navspacer are on the same line since one is fixed and not the other. When you add padding to the navspacer, it pushes away the fixednav from it. When you add margin-top:30px; it moves the fixednav and navspacer together. To fix this, add a fixed position to the navspacer and add the content to the fixed navspacer:
/*html*/
<div class="fixednav">some nav stuff</div>
<div class="navspacer">main content which should not be covered by nav</div>
/*css*/
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { position:fixed; margin-top: 30px; }
This will give you the correct behavior you are looking for.
Here is a link: http://jsfiddle.net/4vAgZ/
Also, this picture should help you with the padding vs. margin thing.
http://s3.amazonaws.com/codecademy-blog/assets/ae09140c.png
Hope this helps.
You can use a div for spacing like youtube does.
Here i made an example wich uses javascript to listen on window resizes and adjusts the spacer if necessary.
But you can also use this jQuery plugin for every single div.
//initial adjustment
$(function () { $('#topSpacer').height($('#fixedtop').height()); });
//adjustment on every resize event
$(window).resize(function () {
$('#topSpacer').height($('#fixedtop').height());
console.log("<div>" +$('#topSpacer').height() + "</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="topSpacer"></div>
<div>
Does anyone overlay me?
</div>
<div id="fixedtop" style="position:fixed; top: 0px;">
Top navbar elements Page0000000000000 Page11111111111111 Page2222222222222
</div>
<div>
Another relative element
</div>
Can anyone help me with position my content block?
It looks good if there are a lot of content, but not when window higher than content block.
Actualy I need that "content" block on my picture teked all free space (height) and thats why footer stick to the bottom.
I have next HTML markup:
<div>
<header></header>
<nav class="breadcrumbing"></nav>
<section class="left_nav"></section>
<section class="content"></section>
<footer></footer>
</div>
With this CSS:
html,body{width:100%;margin:0;padding:0;}
body{background-color:#629302}
body>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;}
body>div>header{height:50px;background-color:#9dc155}
body>div>nav.breadcrumbing{display:block;height:10px;margin:0;padding:0;}
body>div>section.left_nav{width:172px;margin:8px 20px;float:left;background-color:#cdef88}
body>div>section.content{width:168px;float:left;}
body>div>footer{padding:19px 19px 22px;background-color: #e58b04;clear:left;}
I allready tried answers from Is it possible to get a div's height to be 100% of an available area? and some same questions but with no luck.
ALso my live HTML has backgroun-images, so I can't just put footer to the bottom with position:absolute.
There I post my HTML to preview: jsfiddle.
UPD: scaled live preview:
You will have to set the html and body height property to 100%; then you can set the footer height to 100%; this will tell the main container elements the real meaning of 100% and it will work.
Your updated fiddle
Basically, these are the rules you have to add:
html, body {
height: 100%;
}
footer {
height: 100%;
}
Update
Ok, I might have misunderstood your requirements, here is a cleaner example:
Working example
Basically, what you additionally do in this example is having your wrapper element display:table with an height: 100%, then you make your footer display as table-row.
Important note: This solution uses display-table which is compatible only for IE8+. If supporting IE7 is an issue for you, then you have two solutions that I can think of out of my head:
Either you use a fixed-width footer, push it below the content and then pull it back with a combination of negative margin and padding.
Or you fallback to support of older browser by putting your footer in position using some javascript.
This the breakdown of the code:
HTML
<div class="wrapper">
<header></header>
<section class="main-content">
{child elements of your main-content area}
</section>
<footer></footer>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
margin: 0 auto;
height: 100%;
}
.main-content {
display: table-row;
height: 100%;
}
footer {
display: table-row;
}
Here's an updated fiddle
The crux of this is setting the body to be absolutely positioned to the viewport. From there, if you wanted to allow it to scroll as you normally would, then you would change the footer's position to fixed and the content div's CSS to this:
body>div>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;
position:absolute; top: 0; bottom: 0; overflow-y:auto;}
I've wrapped your content div in another to allow for the automatic margins to center your page, and then defined the footer's box sizing as border-box to account for the padding you're adding to it as well.
I have an element (in my case a HR tag) that needs to be as wide as the browser but which is also wider than it's parent container. However, it still needs to maintain relative positioning so that it scrolls vertically with the page. The problem is that my parent div has to have relative positioning as well (due to other layouts that are working).
The only way I have been able to solve this is to set the width of the HR tag to 3000px with a left position of -1000px. This works, but it adds a horizontal scrollbar to the page (to display the 3000px width). Is there any way to accomplish this cleanly (without the horizontal scroll bar)? You can see my fiddle at http://jsfiddle.net/UGwst/.
Here's the HTML:
<div id="layout-wrapper">
<p>Above Content</p>
<div id="content-wrapper">
<p>Top Content Here</p>
<hr class="rule" />
<p>Bottom Content Here</p>
</div>
</div>
Here's the CSS:
#content-wrapper {
width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
background-color: #ddd;
position: relative;
}
.rule {
background-color: #dbb328;
height: 5px;
position: relative;
left: -1000px;
width: 3000px;
}
I realize that there are a couple of other questions here that are similar, but don't quite seem to fix this issue.
Use position:relative on the parent.
Use position:absolute on the HR, that way the HR is bound to the parent and will scroll with it.
To hide scroll bars use overflow:hidden on your outer wrapper, or BODY.
Try
body {overflow-x: hidden;}
to eliminate the horizontal scrollbar. According to this answer, it even works in IE6 - CSS - Only Horizontal Overflow?
I am sorry if this is a bit of a n00b question but for the life of me I cannot get this lightbox gallery lined up centrally inside my "content" div.
http://www.justthisdesign.co.uk/bathroom-gallery.html
I am ashamed to be asking such a stupid question but honestly I have tried everything. I have given the last image in each row a class of .last, then played around with padding-right and margin-right but it seems to have no effect.
Use <div id="content" class="clearfix thumbs" style="text-align: center;">
Use Margin 4 For all of your Pics in the gallery on the both sides than just Right side!!.You can Remove horizontal padding of content div and adjust the padding area in the width of the div.
text-align: center; on content div.
give your content div a text-align:center; and give your last images in each row a margin-right of 0 otherwise you will have the extra space on the right side.
#content {
padding: 15px 30px;
background-color: #F8F8F8;
}
Instead of padding try use margin:
#content {
margin: auto;
width: 900px;
background-color: #F8F8F8;
}
And mess around with the width to control its position.
hope this helps.
Here is a preview of what I have so far:
The red area is part of the design and should always scroll down with the design. So when the content expands, the footer, and that red bar go with it. This should be at the very bottom of the window.
I tried positioning it absolute and it worked perfectly, except when I re-sized my browser and made it smaller, it would stay at the very bottom but would only work when the browser is in full screen.
What I am doing right now is just positioning it relative with top:-120px; and then as you can see, it gives me the extra whitespace that I want to get rid of.
footer { height:185px; background:url(../images/footer_bg.png) repeat-x; position:relative; z-index: 0; top:-115px; width:100%; }
Not sure what else code to paste, I think that's all everyone needs. The rest is self explanatory. Does anyone have any suggestions on how to approach this?
My goal is to get it just like the image above except without the whitespace, pushed down at the bottom at all times, even when the browser is re-sized.
we use a sticky footer as well - here's the basics:
<div id="container">
<div id="header">Header</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="content">Content Here.</div>
<div class="clearfooter"></div>
</div>
<div id="footer">Footer Here.</div>
Note the clearfooter before the end of the container. Then with CSS you need something like this:
html, body {
height: 100%;
}
#container {
min-height: 100%;
margin-bottom: -330px;
position: relative;
}
.clearfooter {
height: 330px;
clear: both;
}
#footer {
height: 330px;
position: relative;
}
The only downside is that this is a fixed height footer. Don't forget, too if you add any padding to your footer that increases the height and your height on the footer, clearfooter and negative margin on the container need to be adjusted accordingly.
If you happen to need it to work in IE6 you'll need to target the container however you'd like and use:
#container {
height: 100%;
}
Hope that helps!
Sticky footers can be tricky and adding an over lapping background can be even more tircky. What you might want to try is creating a Sticky footer and applying the background image to the body or container background repeating-x and position bottom.
Are you able to create a jsfiddle and I can show you the technique I mean.
When you are offsetting something with position: relative, the element still "reserves" the space it would have occupied otherwise - in your case, the bottom area where you get the whitespace. Set margin-bottom: -115px on your footer to tell it not to do that.