как растянуть футер по ширине браузера?

Здравствуйте!

есть макет на дивах,

<div class="contener">

<div class="header"><div>

<div class="leftbar"><div>

<div class="content"><div>

<div class="rightbar"><div>

</div>

<div class="footer"><div>

css

.contener{width:1200px; margin 0 auto}

.header{width:1200px;}

.leftbar{width:250px;}

.content{width:600px;}

.rightbar{width:250px;}

вот так для всех css а для футер я сделал вот так

.footer{width:100%: margin 0 auto; height:50px; background-color:#000; }

ну вот, когда сужаю браузер футер сужается в месте с браузером, но хотел бы чтобы он был по ширине браузера!

вот футер в браузере открытом виде

а вот после того как сужаю браузер

что-то туплю не могу решить вопрос, помогите плиз!