Learning CSS div placement , positioning -

i learning css, trying place div red background below body, can't seem make fit body, whenever adjust width doesn't align body,when tried place center , 100% width, occupies 100% of width of page not align white background area, whenever 80% align left , not align white background area. please point me right direction. i'm stuck :(

the code have far here: http://pastebin.com/vpmgbzq2

thanks in advance.

make footer div out of tabs div , no need of position: absolute on it. make following changes:

#footer {         margin-top:80%;         height: 20px;         width:50%;         text-align:center;         background:#c00;  } 

here fiddle.

also seems trying make responsive design let me tell way proceeding not right 1 it. may read responsive design ethan marcotte learning it.

edit

make following changes:

1. give height: 400px; or required table div.
2. make footer div out of table div.
3. either remove margin-top or change 5% or 10% required in footer div.
4. add min-height: 100%; .tabs.

check out fiddle.