HTML CSS - Footer - Space underneath

Question

Am having issues trying to get my footer to 'stick' to the bottom of the page below all of the content. I've tried many different techniques but can't get it to work with the header.

What is the best way to style my layout to achieve this?

As you can see the sidebar & content divs go through the footer.

<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>


    <header>
        <div id="title_wrapper">
                <h1 id="title_text">Title</h1>
                <p>title</p>
        </div>
    </header>

   <div id="wrapper">

       <div id="content">

            <p>Languages</p>

            <ul>
                 <li>1</li>
                 <li>2</li>
                 <li>3</li>
                 <li>4</li>
                 <li>5</li>

            </ul>

             <p>Frameworks</p>

            <ul>
                 <li>1</li>
                 <li>2</li>

            </ul>

        </div>

        <div id="sidebar">

              Sidebar  
        </div>
    </div>

   <footer>
       Footer

   </footer>

</body>

CSS:

html, body
{
 width: 100%;   
 height: 100%;
 margin:0;
 padding: 0;
}



h1, p {
padding: 0;
margin: 0;
}


/*Content*/

#wrapper{

  min-height: 70%;
 height: auto;
 height: 70%;
 margin: 0 auto -400px;
}

#content{
float:left;
width:70%;
height: 100%;

}

#sidebar{
padding-top: 30px;
float:left;
width: 30%;
background-color: lightgrey;
height: 100%;
text-align: center
}

/* Header */

header #title_text{

 font-size: 70px;
}

header #title_wrapper{
text-align:center;
position: relative;
top:100px;

}

header {

background-color: orange;
position: relative;
height:30%;
width: 100%;
color:white;
margin:0;

}


/* footer */
footer{
background-color: #202020;
color: white;
position: absolute;
width: 100%;
height: 60px;
bottom: 0;  
}

Answer 1

You seem to have some weird work arounds that I couldn't understand.

I put your code into a jsfiddle and fixed the problems. This is how it looks: https://jsfiddle.net/pdyrgc2j/3/

The changes are:

Removed margin: 0 auto -400px; on the wrapper. Why did you need that?
Removed the top: 100px from #title-wrapper . Again couldn't understand why you needed that?
The main problem causing the scrolling of sidebar was the 30px padding on sidebar. Solved that by moving the text into another div inside the sidebar and applying padding to that div
~~Changing position to fixed for the footer is advisable as suggested by @Pankaj, but after the above changes, you won't notice any difference~~

EDIT: Actually, changing position to fixed is NOT advisable as the footer will always be visible on screen. Don't set position property at all, as shown in the Fiddle, and the footer will always go below the content.

Answer 2

Use position: fixed instead of position: absolute for footer

footer {
    background-color: #202020;
    color: white;
    position: fixed;
    width: 100%;
    height: 60px;
    bottom: 0;
}

HTML CSS - Footer - Space underneath

Question

2 answers

solution1
3 2016-02-21 09:36:52

solution2
0 2016-02-21 08:57:32

HTML CSS - Footer - Space underneath

Question

2 answers

solution1 3 2016-02-21 09:36:52

solution2 0 2016-02-21 08:57:32

solution1
3 2016-02-21 09:36:52

solution2
0 2016-02-21 08:57:32