Horizontal center align multiple divs

Question

I have a container div (#div1), which contains 5 child divs (#div2, #div3, #div4, #div5, #div6) contained inside it.
The code is something like this:
<div id="div1">
<div id="div2">Content2</div>
<div id="div3">Content3</div>
<div id="div4">Content4</div>
<div id="div5">Content5</div>
<div id="div6">Content6</div>
</div>
The Content2,3,4,5,6 are all of different length.
I want to align the 5 child divs (#div2, #div3, #div4, #div5, #div6) horizontally in one row inside the container #div1, such that the vacant space inside #div1 gets uniformly distributed between the child divs and the child divs become uniformly aligned in the "center".
The main code for all child divs is (id no is the only thing changed to 3,4,5,6 etc)
#div2{
width: 23%;
position: relative;
margin:0px auto;
white-space:normal;
*display: inline;
_display: inline;
*margin: 0 2px 0 2px;
display:INLINE-block;
float:none;
The main code for container #div1 is
#div1{
margin:0px auto;
width:98%;
text-align:center;
vertical-align:top;
white-space:nowrap;
position:relative;
display:block;
float:none;
However the above code only centers the child div on localhost in IE and Chrome Browser. However on the remote production server it aligns all child divs in one row only in Chrome browser. In IE9, it aligns all the child divs in one single column below one another instead of in one row as shown when hosted on localhost.
If we change float to left or right for child div, no centering takes place and instead all the child divs align to one side. If the display property of child div is changed to block, the centering fails even on localhost. If the display is changed to inline, the div width becomes 100% automatically and it occupies the complete with of container.
Can some one advise on how to ensure uniform horizontal alignment of all child divs in one row on localhost as well as actual remote site server on IE (>=IE6, all other browsers also). I would prefer if display:inline-block is also avoided (display:block or inline is preferred) as it may not be supported in earlier browsers.

Answer 1

when margin-left:2%, the suggested code is making the div before gap d dropoff to next row.
Each descendent div will have an effective width of 18% + 2% = 20%.  There are 5 such divs.  20% x 5 = 100%.  Thus 100% of the space available in div1 will be filled - no more no less.  Bear in mind that the container div is set at a percent width as well, meaning that the resulting number may not produce even results when 18% and 2% are caclulated, i.e., there will be a rounding error.  Also bear in mind that the left-most div in my example will also have the margin applied.  You can eliminate that by a bit more CSS trickery (this applies the margin only to divs that are not the first child of div#div1) -
<style type="text/css">
#div1 div {
          width: 18%;
          margin-left:2%;
          float:left;
#div1 div:first-child {
      margin-left:0;
#div1 {
          margin:0px auto;
          width:95%;
          background-color:#CCC;
          overflow:hidden;
</style>
That method, however, will leave some variable gap to the right of the last div because of the rounding error and the fact that you are now only using up 18% + 20% + 20% +20% + 20% = 98% of the total space.
Be aware that you will need to invoke Live mode to see this render properly in DW.
This approach is simply a variant of the approach shown on css-tricks (which will also fail depending on the width of the containing element.  I suggest you NOT use a containing element that is percent sized and set a fixed width for it.  That will alow you to specify your interior spacing with no rounding error.