Boxes displaying weirdly in IE

[Bluefishy]

Hello, I'm pretty new to the CSS world, so please excuse my inexperience. I am working on a site with a wrapper that holds three boxes in the footer. When I view these in Firefox everything looks perfect, but the boxes aren't nicely centered in IE9. I have absolutely no idea how to resolve this and would greatly appreciate any help you could offer.

Here's the link, I'm referring to the content in the dark gray box at the bottom:
http://kaoud.businesscatalyst.com/

The css is as follows:

.base_1 {
background-color: #292929;
width: 1008px;
font-size: 16px; font-weight: bold; color: #ffffff; text-align: left;
clear: both;
}

.wrapper {
width: 1008px;
margin: 0 auto;
overflow: hidden;
position: relative;
padding-left: 20;
padding-right: 20px;
}

.box2 {
width: 275px;
height: 200px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px
padding-bottom: 520px;
margin-left: 10px;
margin-bottom: 10px;
float: left;
display: inline;
padding: 20px;
}




And the HTML:

<div class="base_1">
<div class="wrapper">
<div class="box2">
More Information<br />
<br />
<a href="#">Shop at home with Kaoud</a><br />
<br />
<a href="#">Kaoud TV &ndash; Safe &amp; Beautiful Stairs</a><br />
<br />
<a href="#">Kaoud TV &ndash; The Kaoud Label</a><br />
<br />
<a href="#">Kaoud TV &ndash; Bring Out The Best 1</a><br />
<br />
<a href="#">Kaoud TV &ndash; Bring Out The Best 2</a><br />
<br />
</div>
<div class="box2">
<img alt="" src="/images/extrememakeover.jpg" />
</div>
<div class="box2">
Kaoud Oriental Rug Locations<br />
<br />
<a href="#">- West Hartford, CT</a><br />
<br />
<a href="#">- Manchester, CT</a><br />
<br />
<a href="#">- Canton, CT</a><br />
<br />
<a href="#">- Holyoke, MA</a><br />
<br />
</div>
</div>
</div>

[chrishirst]

How can an element be "centred" when it is the same width as the parent element.

[Bluefishy]

Well, I guess I don't want it all centered, I just want it to be lined up so that there's an equal distance between the two boxes on each both sides of the footer. In IE it's all smooshed to the left side.

[meesa]

Set your HTML order to:
[Left box]
[Right box]
[Middle box]

Then float left and right respectively, (Remove display:inline) And with the center box, margin left and right should be set to auto.

[chrishirst]

Oh and use a valid doctype for IE

[Bluefishy]

Thank you so much, I'm going to try all your suggestions and let you know how it goes, I really appreciate your help!!!

[Bluefishy]

You are all super awesome, your advice worked really well, thank you so much!