In my layout I have created the following jsfiddle-hosted resizable sticky footer. However, on the resize it overlaps the content. Is there anyway to make it responsive on all browsers?

<http://jsfiddle.net/9aLc0mg2/>

```
$(function () {

    $('.footer').resizable({
     handles: 'n, s'
    }).bind('resize', function(){
      $(this).css("top", "auto");
    });

});

<div class="footer">
   <p> footer content here </p>
</div>

```

CSS:

```
.footer {
  color: #ffffff;
  position: fixed !important;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  z-index: 1000;
  height: 60px;
  background-color: #333333;
}

```