how to set footer at bottom?

Question

following is my code

html:

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

css:

#content{
  width:600px;
}
#A{
  position:relative;
  float:left;
  background:#0000ff;
  width:300px;
  height:600px;
}
#B{
  position:relative;
  float:right;
  background:#00ff00;
  width:300px;
  height:100px;
}
#footer{
  background:#ff0000;
}

I want to set footer at bottom,but footer is just under the div B.

when I use float:left for footer,though the footer is at bottom,I have to set width for footer,but I want to let footer's width is equal to browser window's width.

then how can I set footer at bottom and set footer's width equal to the browser window's width? any suggestion is appreciated.