<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;
}
Check out this fiddle: http://jsfiddle.net/7EsMR/
Is it feasible to bypass utilizing display:table on the container of unknown width and sustain the same functionality that it provides?
It needs to be compatible with IE7, but not IE6. :D
Desired outcome: http://jsfiddle.net/7EsMR/1/
Appreciate your help ;)