CSS divs: display:table alternative?

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. :D

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

Thanks ;)

Could be a duplicate of: http://stackoverflow.com/questions/283961/centering-a-div-block-without-the-width — sascha, Dec 22 '11 at 14:34

justisb · Accepted Answer · 2011-12-22T14:40:31.880

3

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

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

edited Dec 22 '11 at 14:40

answered Dec 22 '11 at 14:35

justisb

7,081
2
26
44

i'm afraid OP needs IE7 support :-/ – ptriek Dec 22 '11 at 14:36
@ptriek Ah right, updated to `display: inline`, which I just checked. He'll just have to do some fiddling with the heights. – justisb Dec 22 '11 at 14:41

score 2 · Answer 2 · answered Dec 22 '11 at 14:37

2

A combination of display:inline + text-align:center might do the trick:

http://jsfiddle.net/kG846/2/

answered Dec 22 '11 at 14:37

ptriek

9,040
5
31
29

score 0 · Answer 3 · answered Dec 22 '11 at 14:45

I guess you could do:

#wr {
    width:300px;
    height:100px;
    border:1px solid red;
    margin:50px;
    text-align: center; 
}
#knownWidth {
    width:100px;
    height:30px;
    margin:0px auto;    
    border:1px solid gray;
}
#unknownWidth{
    display:inline-block;
    height:30px;
    border:1px solid blue;
}

Should work in IE7 since inline-block is supported.

CSS divs: display:table alternative?

3 Answers3

Linked