Footer at the bottom where content overflows the footer

Question

I have the page layout with footer still at the bottom of the page. The problem is when I use some divs with content which are FLOAT. If I ommit the float then the content behaves properly and does not overflow the footer. Please see:

`enter code here`
http://jsfiddle.net/8o7t4wq9/1/


CSS:
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

HTML:
<div id="container">
   <div id="header"></div>
   <div id="body">
       <div style="width:100%;min-height:500px;background-color:gray;clear:both;">IMAGES</div>
       <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left">First box of content</div>
       <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left">Second box of content</div>
   </div>
   <div id="footer">FOOTER</div>
</div>

score 0 · Answer 1 · answered Jun 17 '15 at 11:33

0

#footer {
   position:absolute;//remove
   bottom:0;//remove
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
    clear:both;//add
}

answered Jun 17 '15 at 11:33

madalinivascu

32,064
4
39
55

score 0 · Answer 2 · answered Jun 17 '15 at 11:35

Try to add a parent div to your floated divs and add clearfix to the parent.

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }

<div id="container">
   <div id="header"></div>
   <div id="body">
       <div style="width:100%;min-height:500px;background-color:gray;clear:both;">IMAGES</div>
       <div class="clearfix">
           <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left;">First box of content</div>
           <div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left;">Second box of content</div>
       </div>
   </div>
   <div id="footer">FOOTER</div>
</div>

Great, thanks a lot, it works fine now (regarding the advice to remove the absolute position, I could not do that because if the content was shorter than the height of the page, then the footer would not sit down, but thanks anyway) — Lukáš Ježek, Jun 17 '15 at 12:04

score 0 · Answer 3 · edited May 23 '17 at 11:51

0

It's hard to pinpoint/see your problem widouth fiddle, but you should probably look at css clearfix

Add css class(clearfix) to containers

.clearfix:after{
    content: "";
    display:table;
    clear:both;
}

for more info and cros browser support look at this thread What is a clearfix?

edited May 23 '17 at 11:51

Community

1
1

answered Jun 17 '15 at 11:36

Matej Žvan

758
4
13

I have put the link to fiddle in my question, it is http://jsfiddle.net/8o7t4wq9/1/ – Lukáš Ježek Jun 17 '15 at 11:51
you can see hov you can add clearfix to your code http://jsfiddle.net/mzvaan/53h36Lht/ – Matej Žvan Jun 17 '15 at 12:00

score -1 · Answer 4 · answered Jun 17 '15 at 11:38

-1

Remove position:absolute and bottom:0 from footer and add clear:both.

#footer {
   width:100%;
   height:60px;
   background:#6cf;
   clear:both;
}

Footer at the bottom where content overflows the footer

4 Answers4