CODEWITHSUNDEEP
htmlcss
user1372448
user1372448

Reputation: 437

Detach footer from the main container

The web page layout of my website look something as follows:

The web page layout of my website look something as follows:

<body>
<div class="container">
   <div class="sidebar">
   </div>
   <div class="content">
   </div>
</div>

<div class="pre-footer">
</div>
<div class="footer">
</div>
</body>

Css:

body  {background:#eaeaea url('../images/bg/sfere.jpg') no-repeat top center fixed;}
.footer {float:left;width:100%;height:67px;background:url('../images/bottom.png') bottom center;bottom:0px;left:0px;}
.container{padding-top:5px;margin-left:100px;margin-right:auto;}
.sidebar {float:left;width:220px;min-height:610px;text-align:center;}
.home {margin:178px 0 0 100px;padding:0 10px 0px 10px;width:800px;float:left;}
.pre-footer {float:left;width:98%;height:100px;position:relative;background:url('../images/pre-footer.png') bottom center;left:15px;bottom:-32px;}

All the elements are appearing fine in layout. However, the problem is when the height of the container is less, the footer elements stick below the container and don't stay in the footer position. Similarly, if I manually fix the height as 600px to make it look like a footer, on browser resize, the footer still stick below the container and doesn't look like a footer.

How do I rectify this problem?

Upvotes: 0

Views: 278

Answers (1)

techfoobar
techfoobar

Reputation: 66663

Use fixed position for your footer.

div.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 50px; /* change this as needed */
}

and specify a bottom padding to your body to ensure all content is visible when scrolled.

body {
    padding-bottom: 50px; /* change this to the max-height given for your footer */
}

Upvotes: 1

Related Questions