Based on this article I want to make sticky footer on my project. Please take a look at this link.
I can't understand why I'm getting vertical scrollbar, and why #page div goes under #footer
Your footer has a 1px border-top; your container has a 1px border; your nav has a margin-top... all of these affect the vertical height, so the overall height is pushed to more than 100% => vertical scrollbar.
You need to account for that when you set your padding/margin to offset for the extra pixels. Additionally, you're giving the footer element padding/margin. What you should do is use the footer element as a wrapper and then create an element within it with the proper padding/margin.
Here's how you can make it work...
1 change #nav styles to padding: padding: 10px 0 0 0;
2 get rid of the 1px border on your #container
3 change your footer to this...
<div id="footer">
<div id="footer-content">
© 2012 Code Arts
</div>
</div>
4 change your footer css to this:
#footer {
border-top: 1px solid #C9E0ED;
height: 53px; /* 20px padding-top + 20px padding-bottom + 13px line-height */
margin-top: -54px; /* height + 1px border-top */
position: relative;
clear: both;
}
#footer-content {
font-size: 13px;
line-height: 13px;
text-align: center;
}
Try this:
z-index: 2;
...on #footer.
Also, what in the world is margin-top:-32767px; supposed to do!?
Related
My footer is having some odd issues when the screen resolution gets to a certain point - it responds and works with the screen size, but only the upper half of the footer has a background. I have bottom set to 0; and position set to absolute but it just isn't looking good. Any help would be appreciated.
Link to webpage (be sure to play with the responsiveness to see what I'm talking about): http://cardspoiler.com/Cardspoiler/MSoG/Navbar/Mage.html
HTML: https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/MSoG/Navbar/Mage.html
CSS: https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/Cardspoiler.css
The issue I am seeing is in the .left and .right classes. You have a transform: translateY(25%); attribute on them which is pushing them down past their natural positions. If you want your footer to sit at the bottom of the page and have the same look they do now change your CSS like so:
footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(128,128,128,.3);
text-align: center;
border-top: 1px solid #232526;
}
.left, .right {
display: inline-block;
list-style-type: none;
width: auto;
font-size: 100%;
vertical-align: top;
bottom: 0;
margin-bottom: 0;
padding-bottom: 10px;
}
.right li {
text-align: left;
}
Basically I just removed all of the translate properties from those divs removed the margin-bottom from the uls and adding some padding-bottom to them. With the max-height removed from the footer tag the padding gives some space from the bottom of the page and expands the footer background so it doesn't leave a gap at the bottom.
I have a footer that has three rows. Row one is two divs floated left. Row two is a 'divider' line that is 100 width of the footer. Row three will be 3 more divs floated left.
The problem is on the first row. I have a margin-top:40px; for the middle line. The first floated element sits on top as it should but the second floated element ( which is going to be a text box and has padding inside ) sits on top fine WITHOUT padding, but when I put the 10px padding in, it sits 40px above as it should, but adds extra margin to the elements around it.
.footer {
background-color: #172135;
padding: 40px;
}
.footer-links {
margin: 0px auto 0px auto;
float: left;
}
.middle-line {
width: 100%;
border: 1px solid #1889b4;
padding: 0;
margin-top: 40px;
}
.newsletter {
padding: 10px;
border: 1px solid #188ab4;
width: 300px;
font-family: 'rBblack';
font-size: 12px;
color: white;
text-transform: uppercase;
float: left;
}
<footer class="footer clear" role="contentinfo">
<div class="footer-row-1 clear">
<div class="footer-links">
stuff
</div>
<div class="newsletter">
Sign Up For Our Newsletter
</div>
</div>
<div class="footer-row-2 clear">
<div class="middle-line"></div>
</div>
<div class="footer-row=3 clear">
more stuff
</div>
</footer>
**** PLEASE NOTE ***** The code snippet is not an accurate representation as css reset and clearfix is missing so not correct. Someone else edited this and put it there....
Unless you tell it to, the browser will make the element the width you specify, and then add on the padding etc
If you set the border-sizing property this will prevent it from happening;
box-sizing: border-box;
Try adding that to your CSS declaration
You can compensate for the shifting by of the padding by adding either margin-top:-10px; or position: relative; top: -10px; to .newsletter.
.footer {
background-color: #172135;
padding: 40px;
}
.footer-links {
margin: 0px auto 0px auto;
float: left;
}
.middle-line {
width: 100%;
border: 1px solid #1889b4;
padding: 0;
margin-top: 40px;
}
.newsletter {
padding: 10px;
margin-top: -10px; /* negative or padding value - readjusts position back up */
border: 1px solid #188ab4;
width: 300px;
font-family: 'rBblack';
font-size: 12px;
color: white;
text-transform: uppercase;
float: left;
}
<footer class="footer clear" role="contentinfo">
<div class="footer-row-1 clear">
<div class="footer-links">
stuff
</div>
<div class="newsletter">
Sign Up For Our Newsletter
</div>
</div>
<div class="footer-row-2 clear">
<div class="middle-line"></div>
</div>
<div class="footer-row=3 clear">
more stuff
</div>
</footer>
After reviewing what you said about my old, now competently irrelevant answer, i think i found what your issue is.
padding:10px;
adds padding to ALL 4 sides. it is functionally equivalent to
padding: 10px 10px 10px 10px;
the newsletter div is now significantly Taller than the other stuff in the same div, and the browser is forced to compensate by making the container div bigger. the container div gains 20 pixels in height when you do this, which would appear to add additional margin to the other elements.
to remove this, you would instead want to use either of these
padding: 0 10px;
padding: 0 10px 0 10px;
as per http://www.w3schools.com/cssref/pr_padding.asp
either will add padding to the LEFT and RIGHT sides equal to 10px, but the top and bottom will remain 0. the newsletter div will no longer be over-sized, making the container div bigger, which will make it appear there is margin for the others.
Edit (additional options):
however, if you want to keep the top and bottom padding, your have 3 main options.
1) add the padding to the other div inside the parent as well as newsletter. they will line up with newsletter, and have the extra space above and below. you would likely want to shrink the middle div's height to compensate for the increase.
2) to completely remove the newsletter from its parent div. set the width of newsletter and its parent div so that they add up to 100% including padding and borders, or use box-sizing:border box, and float both left so that they line up horizontally. now you can make newsletter as big as you want, and it will not affect the others.
3) you fix the height of the parent div,so that newsletter can be bigger than its parent div, however this tends to cause problems with layouts if your not careful, as it may overlap.
I'm using this method to get my footer at the bottom of the page properly.
However, when I add a border to my footer, I end up with a scroll bar regardless of the content on the screen. My confusion is that:
I thought borders functioned outside padding but inside margins, such that like padding they do not effect any layout external to the div.
Is this wrong?
Here is my skeleton html:
<body>
<div class="wrapper">
<div id="top"></div>
<div id="body">
<div id="box1"></div>
<div id="box2"></div>
</div>
<div class="push"></div>
</div>
<div class="footer"></div>
</body>
And here is the relevant CSS:
#top
{
height: 105px;
border-bottom-style: solid;
border-bottom-color: #044E97;
border-bottom-width: 7px;
}
#body
{
margin-top: 25px;
width: 100%;
background-color: white;
color: #282828;
font-size: 85%;
}
#box1
{
width: 460px;
float: left;
margin-left: 25px;
margin-right:75px;
}
#box2
{
margin-left: 25px;
margin-top: 15px;
padding-top: 0%;
padding-bottom:0%;
margin-bottom:45px;
width: 350px;
height: 320px;
float:left;
border-top-style: solid;
border-top-color: #FFFFFF;
border-top-width: 10px;
}
html
{
height: 100%;
}
body
{
min-height: 100%;
background-color: white;
margin: 0;
}
html, body
{
min-height:100%;
position:relative;
}
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -3em;
}
.footer, .push
{
height: 3em;
clear: both;
}
.footer
{
width:100%;
background-color: #0563A1;
border-top-style: solid;
border-top-color: #044E91;
border-top-width: 8px;
color: white;
font-size: 77%;
padding-top:.3em;
padding-bottom:.3em;
}
If I change the footer div to not have padding, the scroll bar clears.
This assumption is incorrect:
I thought borders functioned outside padding but inside margins, such that like margins they do not effect any layout
Margins and borders do affect layout—it is just that they are positioned outside the padding. The hierarchy of spacing starts from explicitly defined dimensions (width and height), followed by paddings, then borders, then margins.
If borders and margins did not affect layout, it would then be impossible to create spacing between elements (no margins) or that borders of adjacent elements will overlap (borders taking up no additional space).
The issue you are facing is that borders are computed not as part of the width or height—when you leave a 3em space at the bottom of your body, the footer that is 3em high will fill the space. But when you add borders and/or padding to it, it will add an additional vertical height (sum of top padding of 8px, and top and bottom borders of 0.3em each) to the defined height, causing it to exceed 3em and hence trigger an overflow.
To force your footer to stick to 3em, you can either use box-sizing: border-box to force the height attribute to take into account border widths and padding, or height: calc(3em - 0.6em - 8px) to manually reduce the height of the footer so the sum of height, top padding and top+bottom border widths remains at 3em total.
Change your box-model to border-box, like this:
html{box-sizing: border-box;}
Let me know if it helps.
I have split my footer tag into 2 seperate tags, 1 being a disclaimer and the other being contact but the children tags wont inherit the background color i want to set.
<footer role="contentinfo" id="contentinfo">
<div class="disclaimer">
</div>
<div class="contact">
</div>
</footer>
footer {
color: #FFF8BF;
width: 100%;
padding:0 px;
background-color: #1C1C1C;
margin-top: 0px;
margin-bottom: 0px;
bottom: 0;
display: block;
/*border-radius: 0px 0px 10px 10px ;*/
}
.disclaimer {
float: left;
color: white;
max-width: 50%;
}
.contact {
color:white;
float:right;
text-align: left;
padding-right: 20px;
padding-top:0px;
padding-bottom:0px;
margin: 0px;
max-width: 50%;
}
Thanks for any help
Blockquote
Either you set a height of the footer:
CSS
footer {
min-height: 100px;
}
Or you could insert content into the footers' children and set the overflow:auto property for the footer
HTML
<footer role="contentinfo" id="contentinfo">
<div class="disclaimer">
Sample content
</div>
<div class="contact">
Sample content
</div>
</footer>
CSS
footer {
overflow: auto;
}
Here's an example Fiddle.
Background color property cannot be inherited
you can achieve what you want by adding this in your code before closing footer tag
<br style='clear:both'></footer>
Actually, the background color is shown in your child divs, but since you are using float in them, and didn't set a specific height on your footer, the height of your footer is 0 since floating elements don't expand the parent container. At least not for block elements. Unless you set a different display attribute like display: table.
so change your footer class to:
footer {
color: #FFF8BF;
width: 100%;
padding:0 px;
background-color: #1C1C1C;
margin-top: 0px;
margin-bottom: 0px;
bottom: 0;
display: table; // <---- change this to table instead of block
/*border-radius: 0px 0px 10px 10px ;*/
}
You do not have a height at the moment, as the content and disclaimer are empty
if you add overflow:auto; with footer it will work. Try giving a width and height. Also for testing you can always add a border: 1px solid red; or something
EDIT: For now instead of max-width use width or min-width as with max-width the max width will be 50% yes BUT it can be 0% as it is in this case
I am new to coding and have a small problem I can't figure out. I have a #wrapper div defined to allow me to center my content on the page and color the background white (background color defined in css). Whenever I have the height property set to auto, I have a white box at the top of my page when rendered which seems to represent the padding definitions I have set in the #wrapper properties. My actual page height is fine when rendered meaning that all the content appears as expected, but the only way to make the white box extend to the bottom of the page so the whole background is white is to enter a fixed height value. Here's what I have:
#wrapper {
width: 940px;
height: auto;
/* border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000; */
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
position: relative
}
Any help is surely appreciated!
#wrapper {overflow: hidden}
OR
#wrapper {overflow: auto}
If you want the #wrapper div to extend to the bottom of the page you need to provide an explicit height. height: auto will adjust to fit the content only. If #wrapper is a direct child of your main page div or just below your body you can set that parent element (body or some div) to something like 100% or a static value and then set your #wrapper to a percentage of that value like...
I am NOT advocating inline styles!! just an example
<body style="height: 480px">
<div id="wrapper" style="height: 95%">
content!
</div>
</body>
Body could also be a percentage and would then adjust to the window height, might work but is probably not what you want, just another option.