Como centralizar o rodapé do meu site corretamente

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}

Clique 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 disse:

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

Clique 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!