2 divs position

Question

Again me with my divs =(. I have this:

<div id="header"></div>
<div id="body">
  <div id="..."></div>
  <div id="..."></div>

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

and css:

#body { width: 100%; margin 0 auto; }
#content {   position: absolute;   height: 200px; width: 100%; }
#footer {   height: 63px;   clear:both; }

Now result: content div with much text and footer under text.

How can I make my footer under all content-area?

Answer 1

Note, there is a stackoverflow-like site for designers called doctype: http://doctype.com/

Answer 2

I've encountered this situation several times. I've been using sticky footers. It's widely compatible with several browsers and just seems to work.

Answer 3

If you use this styling you will see the (blue) #footer under the (red) #content as you requested:

#body {width: 600px; margin 0 auto; }
#content {position: relative; height: 200px; width: 600px; background-color: red; }
#footer {height: 63px; clear:both; width: 600px; background-color: blue; }