Cómo centrar el footer de mi web correctamente

Buenas, recurro a este foro ya que llevo varios días investigando, probando e informándome de cómo centrar el footer de mi web, he probado mil cosas. Os pego el código del footer de mi blog por si vosotros veis el fallo:

#footer{background:url(http://1.bp.blogspot.com/-7RzaIqFQm...U/nbbz9LsjNbQ/s1600/bg.png);border-center:4px solid #000;width:1024px;padding:5px;}
.footer-wrapper{color:#aaa;font:12px Arial;height:100%;line-height:16px;overflow:hidden;padding:0}
.footer{float:center;width:31%;margin:10px}
.footer .widget{margin-bottom:30px}
.footer h2{background:url(http://4.bp.blogspot.com/-tk5hQcNMq6M/T8zPEwjH-RI/AAAAAAAAGm0/t8xkrJitkxg/s1600/batas.gif) repeat-x scroll bottom;font:bold 14px Arial;padding-bottom:8px;margin-bottom:8px;line-height:1.3em;text-transform:uppercase;color:#ddd}
.footer .widget-content{line-height:17px}
.footer ul{list-style:none;color:#EAE9E8;margin:0;padding:0}
.footer li{background:url(http://4.bp.blogspot.com/-Bt0JYGRHfpk/T7ZpN5RNSQI/AAAAAAAAGJQ/zQtrWVZwgHA/s1600/bullet.png) no-repeat 1px 4px;font:normal 12px Arial;color:#626262;text-indent:0;line-height:1.2em;margin:0;padding:2px 0 3px 17px}
.footer a:link,.footer li a:visited{color:#aaa;text-decoration:none}
.footer li a:hover{color:#fff}

Hacer clic para expandir...

El problema no estará en el CSS sino en la ubicación del código del footer, al final del código de la plantilla.

¿Aquí? Esta es la web: Rubén Cánovas

<div id='footer'>
<div class='content-wrapper'>
<div class='footer-wrapper'>
<b:section class='footer' id='footer1' preferred='yes'/>
<b:section class='footer' id='footer2' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<b:section class='footer' id='footer4' preferred='yes'>
<b:widget id='FollowByEmail1' locked='false' title='Sigue el Blog en tu email' type='FollowByEmail'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'>
<div class='follow-by-email-inner'>
<form action='http://feedburner.google.com/fb/a/mailverify' expr😱nsubmit='&quot;window.open(\&quot;FeedBurner Email Subscription + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot😉; return true&quot;' method='post' target='popupwindow'>
<table width='100%'>
<tr>
<td>
<input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
</td>
<td width='64px'>
<input class='follow-by-email-submit' type='submit' value='Submit'/>
</td>
</tr>
</table>
<input expr:value='data:feedPath' name='uri' type='hidden'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>
</div>
<span class='item-control blog-admin'>
<b:include name='quickedit'/>
</span>
</b:includable>
</b:widget>
</b:section>
<div class='clr'/>
</div></div>
<div id='credit'>
<div class='content-wrapper'>
<div class='left'>
<strong>Support :</strong>
<a href='#'>Your Link</a> | <a href='#'>Your Link</a> | <a href='#'>Your Link</a><br/>
Copyright © 2013. <a class='sitename' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> - All Rights Reserved
</div>
<div class='right'>
</div></div>
</div></div>
&lt;!--</body>--&gt;&lt;/body&gt;
</HTML>

puedes intentar borrando esto:


del css #footer

Varian dijo:

.footer{float:center;width:31%;margin:10px}

Hacer clic para expandir...

Float:center; no existe. Quitale eso. Cambia el margin por: margin:10px auto;

quitale el width:1024px, lo acabo de hacer en tu web y listo! 😀

---------- Post agregado el 02-jul-2013 hora: 15:00 ----------

en el ID="FOOTER"

No se me queda igual que el header, se me expande a toda la pantalla, pero yo quiero tenerlo todo a 1024 centrado, para evitar problemas con otras resoluciones de pantalla o con el logo de arriba que no puedo hacerle el motivo...

---------- Post agregado el 02-jul-2013 hora: 16:32 ----------

He pensado en poner a partir del logo/cabecera un motivo igual al del menú para que así se adapte a todos los navegadores y resoluciones sin problema, ¿Sabéis de lo que hablo? :topsy_turvy: jajaja , ¿como podría hacer eso? Muchísimas gracias!