How to push floated left and right divs right next to a middle one

Question

Image:

I would like to have them all centered in the middle of the page, with the right and left floated divs sticking right next to the one in the middle.

I can achieve this effect for a particular screen size by using margin-left: [val]px and margin-right: [val]px for the left and right floated divs. However, since the width of the page is dynamic(I am using ZURB Foundation 5), I can't specify concrete values, as different displays would render the page in a different way, often resulting in the middle div being pushed down.

This is the code I have now:

HTML

<div id="container">

<div class="hide-for-small" id="templatemo_wrapper_left">
    <table>
        .
        .
        .
    </table>
</div>

<div class="hide-for-small " id="templatemo_wrapper_right">
    <table>
        .
        .
        .
    </table>
</div>

<div class="center">
    .
    .
    .
</div>

</div>

CSS

    #templatemo_wrapper_left {
    float: left;
    width: 120px;
}

    #templatemo_wrapper_right {
    float: right;
    width: 120px;
}

    #container {
    text-align: center;
}

.center {
    text-align: left;
    display: inline-block;
}

    #templatemo_wrapper_left table, #templatemo_wrapper_right table {
    position: relative;
    border: none;
    text-align: center;
    width: 120px;
}

I've been trying to fix this issue for a while, so would appreciate some help. Thanks!

Answer 1

Do you really need the floating? Or could display:flex be an option? Then it becomes quite simple:

 /* solution */ .container { display: flex; justify-content: center; } /* for demo purposes */ * { height: 50px } .container { width: 400px; background-color: rgba(0,0,0,.1) } .content { width: 100px; background-color: green } .hidden-xs { width: 10px; background-color: blue } 

 <div class="container"> <div class="hidden-xs"></div> <div class="content"></div> <div class="hidden-xs"></div> </div>