CSS - Sticky footer [duplicate]

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!

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

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;
}

With Flexbox, life is way easier.

.FlexContainer {
  display: flex;
  flex-direction: column;
}

.Main-Content {
  flex: 1; 
  // This ensures, all extra space is stretched by this class. Remaining will stretch to own height
}

/* Only to distinguish. No need to give body height  */

header {
background-color: red;
}
main {
background-color: green;
}
footer {
background-color: blue;
}

body {
height: 300px;
}

<body class="FlexContainer">
  <header>HEADER</header>
  <main class="Main-Content">
    This is main section
  </main>
  <footer>FOOOOTERRR</footer>
</body>

CSS - Sticky footer [duplicate]

Related

Recent Posts