Question

I’m having some trouble finding the way to create 3 DIVs side by side, where the middle DIV has a static size (let’s say 900px), and the ones on the left and right side have auto-adjustable widths.

I need to do this in order to put backgrounds on the side DIVs, because the middle div already has a transparent background, so I cannot create a wrapper DIV for the middle one holding the other background. As you might imagine, you’ll be able to see through the middle DIV’s background.

Any ideas? 🙂

Answer 1

Is this you want?

HTML:

<div class="wrapper">

    <div class="side" style="float:right;width:50px;">side</div>
    <div class="side" style="float:left;width:50px;">side</div>
    <div class="middle" style="margin:0 50px;">content middle</div>

    <div style="clear:both; height: 40px;"></div>

    <div id="container">

        <div class="left">side</div>
        <div class="center">center</div>
        <div class="right">side</div>

    </div>

</div>

CSS:

.wrapper {
    max-width: 1000px;
}

.side, .middle {
    text-align: center;
}
.side {
    background: red;
}
.middle {
    background: blue;
    color: white;
}

#container {
    display: table;
    width: 100%;
}

.left, .center, .right {
    display: table-cell;
    text-align: center;
    background: red;
}

.center {
    width: 500px;
    background: blue;
    color: white;
}

jsfiddle