Menu
There seem to be tons of solved problems with this one, but neither of them seem to work for me...
I have created this little jsfiddle to show you: jsfiddle footer
And the CSS:
.footer {
width:798px;
border-top: 2px solid #2E181A;
clear: both;
padding: 5px 0 0 0;
background-color: inherit;
text-align: center;
bottom:0;
background-color: #E6D9BD;
position:relative;
height: 30px;
margin: -30px auto 2px auto;
z-index:30;
}
.container {
width: 788px;
margin: 0px auto 0px auto;
padding: 0px 0px 30px 0px;
border:5px solid #2E181A;
background-color: #E6D9BD;
min-height: 100%;
position:relative;
content: " "; /* 1 */
display: table; /* 2 */
}
.contentleft {
background-color: inherit;
margin:5px 10px 10px 10px;
padding:10px 5px 30px 5px;
float:left;
overflow: hidden;
width: 300px;
display:block;
}
.contentright {
background-color: inherit;
margin:5px 0px 10px 10px;
border:0px solid #2E181A;
padding:10px 5px 30px 5px;
float:left;
overflow: hidden;
width: 420px;
display:block;
}
I have set a top-border in the div.footer, and this should be visible and a little space between the border and the div.container.
Hope you will take a quick look at the code and see whatever I'm doing wrong!
745
asked Feb 16 '14 00:02
One of the easiest ways to create a sticky footer is to set CSS position: sticky on the footer. <footer style="position:sticky; bottom:0;">FOOT</footer> That covers the quick basics, but read on for more methods and examples!
But the sticky isn’t required always. If the page has good enough content to the full fill the content area according to screen size, then you may don’t need to it. There are many way to fixed the footer and one of way Flexbox Sticky Footer which can be created using flex CSS property.
By using calc (), it’s an easy way to make the footer fixed at the bottom of the page. We only need two elements, one for content area and a second one in the footer. We will use min-height value as calc (). It makes the content area div take the vertical height of the entire screen, minus 50 pixels of the fixed height of the footer.
Or, even more confusingly, it’s not position: sticky; either, which is liked fixed positioning inside of containers sort of. There was a wrapping element that held everything except the footer. It had a negative margin equal to the height of the footer.
Modern Clean CSS “Sticky Footer” from James Dean
HTML
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
CSS
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Demo here
109
I'm not sure if this is what you wanted? http://jsfiddle.net/2jn3J/19/
I added a container for the footer div with a height of 50px which is fixed to the bottom. The footer div is now absolutely positioned at the bottom with the div with a height of 30px, thus leaving a 20px gap.
.footer-container {
background-color:white;
height:50px;
width:100%;
position:fixed;
bottom:0;
z-index:30;
clear: both;
}
.footer {
border-top: 2px solid #2E181A;
background-color: inherit;
text-align: center;
background-color: #E6D9BD;
height:30px;
position:absolute;
bottom:0;
width:100%;
}
.container
{
width: 100%;
margin: 0px auto 0px auto;
padding: 0px 0px 30px 0px;
background-color: #E6D9BD;
height:2000px;
position:relative;
content: " "; /* 1 */
display: table; /* 2 */
}
.contentleft
{
background-color: inherit;
margin:5px 10px 10px 10px;
padding:10px 5px 30px 5px;
float:left;
overflow: hidden;
width: 300px;
display:block;
}
.contentright
{
background-color: inherit;
margin:5px 0px 10px 10px;
border:0px solid #2E181A;
padding:10px 5px 30px 5px;
float:left;
overflow: hidden;
width: 420px;
display:block;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With