Centering several divs

[Programmers]

I have made a news archive using CSS, and I have set up all the calanders for each month. It looks very good n' all, but it's left aligned!

I've tried putting a div around it all and setting the margin to auto, I've tried setting the text-align to center and I've even tried to use tables to surround and center them.

It's just not working! The things that do work only work in either just FF or just IE.

Does anyone have any advice that may help me?

Here's an example of the archives HTML:

<div class="arch-container">
<div class="arch-month">
<div class="arch-monthname">January</div>

<div class="arch-days-container">
<div class="arch-day">S</div>
<div class="arch-day">M</div>
<div class="arch-day">T</div>
<div class="arch-day">W</div>
<div class="arch-day">T</div>
<div class="arch-day">F</div>
<div class="arch-day">S</div>
</div>

<div class="arch-days-container">
<div class="arch-date">1</div>
<div class="arch-date">2</div>
<div class="arch-date">3</div>
<div class="arch-date">4</div>
<div class="arch-date">5</div>
<div class="arch-date">6</div>
<div class="arch-date">7</div>
</div>

<div class="arch-days-container">
<div class="arch-date">8</div>
<div class="arch-date">9</div>
<div class="arch-date">10</div>
<div class="arch-date">11</div>
<div class="arch-date">12</div>
<div class="arch-date">13</div>
<div class="arch-date">14</div>
</div>

<div class="arch-days-container">
<div class="arch-date">15</div>
<div class="arch-date">16</div>
<div class="arch-date">17</div>
<div class="arch-date">18</div>
<div class="arch-date">19</div>
<div class="arch-date">20</div>

<div class="arch-date">21</div>
</div>

<div class="arch-days-container">
<div class="arch-date">22</div>
<div class="arch-date">23</div>
<div class="arch-date">24</div>
<div class="arch-date">25</div>
<div class="arch-date">26</div>
<div class="arch-date">27</div>
<div class="arch-date">28</div>
</div>

<div class="arch-days-container">
<div class="arch-date">29</div>
<div class="arch-date">30</div>
<div class="arch-date">31</div>
<div class="arch-date"></div>
<div class="arch-date"></div>
<div class="arch-date"></div>
<div class="arch-date"></div>
</div>

</div>
</div>

There are four of those per row and they all appear next to each other. Here's my CSS:

.arch-container{
width: 160px;
float: left;
margin-bottom: 15px;
margin-right: 5px;
}

.arch-month{
width: 147px;
height: 162px;
border: 1px solid #000;
padding: 2px;
}

.arch-monthname{
text-transform: uppercase;
font-weight: bold;
text-align: center;
color: #069;
border-bottom: 1px solid #000;
padding-top: 2px;
padding-bottom: 2px;
}

.arch-day{
text-align: center;
font-weight: bold;
width: 17px;
float: left;
padding: 2px;
border-bottom: 1px solid #000;
}

.arch-date{
text-align: center;
width: 17px;
float: left;
padding: 2px;
}

.arch-days-container{
width: 100%;
height: 10px;
margin: 0px;
}

[Programmers]

Help, please...

[Programmers]

Problem solved.