Question

<div id="wr">
    <div id="con">
        <div id="unknownWidth">some box with unknown width</div>
    </div>
    <div id="knownWidth"></div>
</div>

#wr {
    width:300px;
    height:100px;
    border:1px solid red;
    margin:50px;
}
#knownWidth {
    width:100px;
    height:30px;
    margin:0px auto;    
    border:1px solid gray;
}
#unknownWidth{
    height:30px;
    margin:0px auto;    
    border:1px solid blue;
}

Here is link to fiddle:
http://jsfiddle.net/7EsMR/

Is it possible to avoid using display:table on #unknownWidth box and keep the same functionality as it offers?

Need it to work in IE7, but not IE6. 😀

Required result:
http://jsfiddle.net/7EsMR/1/

Thanks 😉

Answer 1

You can use a combination of display: inline on the child and text-align: center on the wrap:

http://jsfiddle.net/3snzb/2/