Centering a 3 column footer

Question

I've created a 3-columned footer for my tumblog, but despite all my efforts, I can't, for the life me, put the damn thing in the center.

I don't want to use tables and to my understanding, this shouldn't be such a big issue. Yet I'm still having troubles with it. Here is a snippet of the CSS and HTML and a link to the blog itself, in case you want to view the full HTML.

Thank you.

For full HTML: http://ilconfess.tumblr.com

CSS:

/* FOOTER */
.footerwrapper {
background-image: url(http://static.tumblr.com/smpx8si/tipmvfm40/footer.jpg);
background-color: #0b0b0b;
background-repeat: no-repeat;
width: 100%;
height: 230px;
margin: 0 auto;
display:block;
}
.footernav_left {
float: left;
width: 200px; 
border: 1px solid;
}

HTML:

<div class="footernav_left">
<h3>Heading</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="footernav_left">
<h3>Heading</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="footernav_left">
<h3>Heading</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="clear"></div>

Answer 1

See this JSFiddle, you need to wrap the three divs into another container which has its right and left margin set to auto as well as a set width, then the footerwrapper class needs to have text-align:center;. You can then also do away witrh floating the child containers, instead using display:inline-block

HTML

<div class='footerwrapper'>
    <div class='footercenter'>
<div class="footernav_left">
<h3>Heading</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="footernav_left">
<h3>Heading</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="footernav_left">
<h3>Heading</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div></div>

CSS:

/* FOOTER */
.footerwrapper {
   background-image: url(http://static.tumblr.com/smpx8si/tipmvfm40/footer.jpg);
   background-color: #0b0b0b;
   background-repeat: no-repeat;
   width: 100%;
   height: 230px;
   margin: 0 auto;
   display:block;
   text-align:center;
}
.footercenter{
   width:700px;
   margin:0 auto;
}
.footernav_left {
   display:inline-block;
   width: 200px; 
   border: 1px solid;
}