centering a div with nested divs and images in it

[mugz]

I'm trying to center the contents of a div without using align="center" and its driving me mad!

Here is my Code (CSS and HTML)

<style>

DIV.parentDiv{
display: inline;
float: left;
width: 492px;
height: 42px;
text-align: center;
}

DIV.imgFromSprite{
display: inline;
width: 16px;
height: 16px;
background: url(/images/mySprite.png) -64px -48px
no-repeat; margin-right: 3px;
}

DIV.textDIV{
display: inline;
width: auto;
color: #4c4c4c;
}

</style>

<div class="parentDiv">
<div class="imgFromSprite">&nbsp;</div>
<div class="textDIV">Testing</div>
</div>

So what happens hear is that everything does get centerd but the imgFromSprite gets cut off, it's only 16pixels wide but you only 3 pixels of it.

I'm supplying a link to a gif that shows exactly what I mean. Any help would be appreciated. I know I can use padding or margins to set it all up nice but that would defeat the purpose of learning. Here is the link:
<snip> (The black border around the image is just to illustrate where parentDiv starts and ends.)

If you have a cross browser/platform please email me directly at [e-mail]

Thanks everyone!

[edited by: swa66 at 10:13 am (utc) on Nov. 21, 2008]
[edit reason] No personal URLs, please see forum charter [/edit]

[swa66]

Your .imgFromSprite contains a &nbsp; and you set it to display:inline: it's now just text, and will not honor the width you set (or the height for that matter).
The solution could be "display:inline-block;"

Inline-block needs some attention for older browsers (such as IE, FF<3), take a look at suzyuk's post here:
[webmasterworld.com...]

I'd suggest you try a background on your parentdiv as well, it might reveal interesting stuff. It's got display:inline too, but it does honors its size ... cause it is floated.

BTW: ease up on the divs. Before you know it your code suffers from divitis