Как прижать футер к низу?

Здравствуйте. Знаю что в поисковиках много похожих тем, но не помогли их способы, или я не правильно делаю.
Сейчас футер в main выглядит так:

< div class="header">шапка</div>
<div class="news">
{content}
<div id="footer">футер</div>
</div>

т.е футер в блоке с новостями, и в css прописал отступ от новостей на 300px.

Задача чтобы было так:

<div class="header">шапка</div>
<div class="news">{content}</div>
<div class="footer">футер</div>

т.е чтобы футер был отдельно от новостей, был растянут по ширине экрана и был постоянно прижат к низу страницы.

Вот мой css, подскажите пожалуйста что куда надо :

/*BODY*/
body {font-family:Arial, Helvetica, sans-serif; min-width:1024px; position: relative; font-size:12px; background:#fff; color:#666;height:100%;} 
html, body {height:100%; }
table,img {border:0;}
input, select, option {font-family:Arial, Helvetica, sans-serif; font-size:11px;}
h1, h2, h3, h4, h5 { line-height: normal; }
h1 { font-size: 1.25em; color: #666; } h2 { font-size: 1.2em; color: #666; } h3 { font-size: 1.25em; } h4 { font-size: 1.2em; } h5 { font-size: 1em; }
a {	 color: #1f78d3; text-decoration: none; outline:none;}
a:hover { color: #1f78d3; text-decoration: underline; outline:none;}
h1,h2,h3,h4 {margin:0; padding:0;  font-family:Arial, Helvetica, sans-serif; font-weight:normal;}
.reset, .reset li { list-style: none; padding:0; margin:0;  }
.clr { clear: both; }
.thide, .htmenu span { overflow: hidden; display: block; height: 0; line-height: normal; }
table.userstop, table.pm, table.tableform, table.calendar { border-collapse: collapse; border-spacing: 0; }
.lcol, .rcol, form { display: inline; }
.lcol { float: left; } .rcol { float: right; }
.small { font-size: 0.9em; }
.pink { color: #d51e44; }

/*Футер*/
#footer {border-radius: 10px; width: 100%;height: 60px;background: #494949;position: absolute;left: -8px;margin-top: 220px;}  
#textfooter {font-size:13px;color:#fff;text-align: center;}