centering 3-column div containing variable sized text in another div

Question

I'm trying to create a 3-column layout entirely of DIVs but I have difficulty.

If I used tables the old HTML 4 way, I can do this:

<div style="width:100%">
    <table width="50%" align="center">
        <tr>
            <td align="left">
                <img src="whatever.jpg">
            </td>
            <td align="center">
               1 2 3
            </td>
            <td align="right">
                <img src="whateverright.jpg">
            </td>
         </tr>
     </table>
</div>

And the nice thing is the table spans 50% and the table is centered. Here's what I tried in DIV:

<div style="width:100%;overflow:hidden;">
    <div>
        <div style="float:left;">
            <img src="whatever.jpg">
        </div>
        <div>1 2 3</div>
        <div style="float:right;">
            <img src="whateverright.jpg">
        </div>
    </div>
</div>

The only way I could do it is if I know the total size in pixels or em's of all elements in the inner div, then I could set the width of it and center it, but here's the problem.

The images I use are from sprites and the sizes are expressed in pixels. The middle text I use are numbers of large size. The size of the text is adjusted based on user's screen resolution.

Specifying text size in pixels will cause people with the wrong size monitor to have a problem reading the numbers. I'm creating an advanced pagination system.

Is there a way I can center a div of 3-columns inside another div without requiring the sum of the inner div width?

I tried only adding margin:auto to the main div inside the outer div without success.

And remember,

The inner columns of the inside div do render correctly for me as I like it. It's just the matter of centering the whole thing nicely inside the larger div is an issue. And I'm looking for a solution that can work with IE7.

you mean you to simulate a table without using one? – Gacci Oct 29 '15 at 17:53 — Gacci, Oct 29 '15 at 17:53
basically yes. The functionality will be much the same. – Mike -- No longer here Oct 29 '15 at 17:55 — Mike -- No longer here, Oct 29 '15 at 17:55
So, I have edited. Maybe this one is what you are after! – Gacci Oct 29 '15 at 19:13 — Gacci, Oct 29 '15 at 19:13

Gacci · Answer 1 · 2015-10-29T19:08:35.500

Ok, you have to use display properties accordingly.

.table{
    width: 500px;
}
.row{
    width: inherit;
    display: block;
}
.cell{
    width: 33.3%;
    height: 50px;
    
    display: inline-block;
    vertical-align: top;
    
    text-align: center;
    margin: 0px -2.5px;
    border: 1px solid #C0C0C0;
}

<div class='table'>
    <div class='row'>
        <div class='cell'>
            <img src="whatever.jpg">
        </div>
        <div class='cell'>1 2 3</div>
        <div class='cell'>
            <img src="whateverright.jpg">
        </div>
    </div>
            
            
    <div class='row'>
        <div class='cell'>
            <img src="whatever.jpg">
        </div>
        <div class='cell'>1 2 3</div>
        <div class='cell'>
            <img src="whateverright.jpg">
        </div>
    </div>
</div>

I can't rely on display:table. See: http://stackoverflow.com/questions/9290220/display-table-dosent-work-in-ie6-ie7 — Mike -- No longer here, Oct 29 '15 at 18:48

Josef El Bez · Answer 2 · 2015-10-29T18:19:27.180

I think it will solve your problem

HTML

<div style="width:100%;overflow:hidden;">
<div>
    <div class="div" style="">
        <img src="whatever.jpg">
    </div>
    <div class="div2">1 2 3</div>
    <div class="div3">
        <img src="whateverright.jpg">
    </div>
</div>

CSS

  div .div,.div2,.div3{
        width: calc(100% - 66.666666%);
        /* Firefox */
        width: -moz-calc(100% - 66.666666%);
        /* WebKit */
        width: -webkit-calc(100% - 66.666666%);
        /* Opera */
        width: -o-calc(100% - 66.666666%);
        width: expression(100% - 66.666666%);
        display: inline-block;
    }
    .div{
        float:left;
        background:purple;

    }
    .div2{
        float:right;
        background:red;

    }
    .div3{
        background:blue;
    }

calc() isn't compatible with older browsers such as IE7 tho. — Mike -- No longer here, Oct 29 '15 at 18:15

score 0 · Answer 3 · answered Oct 30 '15 at 00:06

Well it turned out that the real answer for me was to float each inner container and specify a percentage of width for each inner container and have the widths add up to be the width of the outer container and each inner container must have something. For example:

<div style="width:100%;overflow:hidden">
    <div style="float:left;width:20%">
     some text at left
    </div>
    <div style="float:left;width:60%">
     some text in middle
    </div>
    <div style="float:left;width:20%">
     some text at right
    </div>
</div>

centering 3-column div containing variable sized text in another div

3 Answers3