centering two divs within one - html

Question

I'm building a sort header for a table that's built entirely with divs (ie. no table tags). Inside the sort header, I have two divs, the sort title and the sort direction. I want to have the header horizontally centered. I have a jsfiddle that looks like this:
<div class="SomeHeader">
<div class="HeaderTitle">sort1</div>
<div class="HeaderSort"> ▾</div>
</div>
<div class="SomeOtherHeader">
<div class="HeaderTitle">sort2</div>
<div class="HeaderSort"> ▾</div>
</div>​
.SomeHeader{
width:90px;
float:left;
background:red;
color:white;
line-height:20px;}
.SomeOtherHeader{
width:120px;
float:left;
background:black;
color:white;
line-height:20px;}
.HeaderTitle{float:left;}
.HeaderSort{float:left;}
What's the way to do this cleanly? I know I can specify the margin and width of each element to get the desired effect but when the value of these header will change then the alignment will not be centered. I know I can also do this with jQuery by looping over the header and calculating the width of headers and titles and programmatically setting the margins of each header. I'm looking to see if there's a more general CSS-based approach that will center both the HeaderTitle and the HeaderSort inside the SomeHeader classes.
Thanks for your suggestions.

Answer 1

http://jsfiddle.net/7R9WW/13/
Same markup, but display: inline-block on the inner divs and text-align: center on the field containers.
.SomeHeader{
width:90px;
float:left;
background:red;
color:white;
line-height:20px;
text-align:center;}
.SomeOtherHeader{
width:120px;
float:left;
background:black;
color:white;
line-height:20px;
text-align:center;}
.HeaderTitle{display:inline-block;}
.HeaderSort{display:inline-block;}

Answer 2

The HeaderSort div seems unnecessary. Could it not look like this http://jsfiddle.net/7R9WW/7/
Updated answer: http://jsfiddle.net/7R9WW/14/

Answer 3

Use a wrapper!
<div class="wrap">
<div class="SomeHeader">
<div class="HeaderTitle">sort1</div>
<div class="HeaderSort"> ▾</div>
</div>
<div class="SomeOtherHeader">
<div class="HeaderTitle">sort2</div>
<div class="HeaderSort"> ▾</div>
</div>​
</div>
And the CSS:
.wrap {width: 220px; margin: auto;}

Answer 4

wrap these two header divs with another div and then giv that div a margin:0 auto.
<div class="SomeHeader">
<div id="wrapper">
<div class="HeaderTitle">sort1</div>
<div class="HeaderSort"> ▾</div>
</div>
</div>
<div class="SomeOtherHeader">
<div id="wrapper">
<div class="HeaderTitle">sort2</div>
<div class="HeaderSort"> ▾</div>
</div>​
</div>
CSS:
#wrapper{
width: 100px;
margin: 0 auto;
overflow: hidden;
}
The width should be the sum of the width of the two contained divs , so you'll need to define a width to them.