Sticky footer + floating elements

Question

One more question about the sticky footer css... lets say i have the following markup:

<div id="container">
    <div id="header">header</div>
    <div id="body">body</div>
    <div id="footer">footer</div>
</div>

As you can see in this fiddle, with the given css, sticky footer works like a charm.
It stays at the bottom of the page if div#body has only a few contents, and is pushed out of screen at the bottom when there are lots of contents.

My problem now is when i try to put 2 floating divs(1 left - 1 right) in the div#body. Then the footer is at the bottom of the screen but is not pushed down when there are a lot of contents (You can see this fiddle)

How can i make make it work? i've tried 1000 tricks found on the web, still not able to understand how to make it work.

Thanks in advance.

Per H · Accepted Answer · 2011-08-24T10:51:03.833

5

Try:

#body {
   overflow:hidden;
}

EDIT: This way you won't need an extra element to clear the floats.

edited Aug 24 '11 at 10:51

answered Aug 24 '11 at 10:45

Per H

1,542
10
19

Here's a working example of this same solution: http://stackoverflow.com/a/20114486/618649 – Craig Tullis Dec 01 '13 at 21:23

score 4 · Answer 2 · answered Aug 24 '11 at 10:46

4

Put <br style="clear:both;" /> after your floating divs.

Like this: http://jsfiddle.net/9FwCN/1/

answered Aug 24 '11 at 10:46

thanks for the quick reply, it really works. Per Holmäng'suggestion also works but he was a bit faster, so i'll accept his answer. But thanks again for bothering! :) – CdB Aug 24 '11 at 10:54
The only unfortunate thing about a solution like this one is that it puts layout logic into what should only be data (HTML = data, CSS = layout). – Craig Tullis Dec 01 '13 at 21:23

Sticky footer + floating elements

2 Answers2