Problems adding columns with sticky footer

Question

Whenever I try to add columns to my page, my footer becomes unstuck and the content goes into the footer. However it works perfectly fine when I add content straight to the holding content div.

HTML:

<div id="wrapper">

  <div id="content">
    <div class="left_content">
    </div>
    <div class="right_content">
    </div>
  </div>

  <div id="footer"></div>
</div>

CSS:

html,
body {
margin:0;
padding:0;
height:100%;
font-family: arial, sans-serif;
}

#wrapper {
min-height:100%;
position:relative;
}

#content {
padding-bottom:96px; /* Height of the footer element */
width: 960px;
margin-left: auto;
margin-right: auto;
}

#footer {
background:#162b83;
width:960px;
height:96px;
position:absolute;
bottom:0;
left:50%;
margin-left: -480px;
}

div.left_content {
width: 500px;
margin-right: 60px;
float: left;
}

div.right_content {
width: 400px;
float: left;
}

Answer 1

Hi I made some adjustments in your code and updated here Please check it, this is what you need. Thanks.

html

<div id="content">
  <div class="left_content">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.SS</p>
  </div>
  <div class="right_content"> sdfasd </div>
  <div class="footer-outer">
    <div id="footer"></div>
  </div>
</div>

css

body {
    padding: 0;
    margin: 0;
}
#content {
    padding-bottom: 96px; /* Height of the footer element */
    width: 960px;
    margin: 0 auto;
}
div.left_content {
    width: 500px;
    margin-right: 60px;
    float: left;
}
div.right_content {
    width: 400px;
    float: left;
}
.footer-outer {
    float: left;
    width: 960px;
    position: relative;
}
#footer {
    background: #162b83;
    width: 960px;
    height: 96px;
    position: absolute;
    bottom: -96px;
    left: 0;
}