Question

Here is what I’m trying to achieve.
I have 3 divs. Let’s call them left center and right. The width of center div is dynamic. It could be 100px, 200px etc depending of the image that center div hold.
How to do so the left and the right divs to be stick to the center div regardless of the center div size ?

Answer 1

Something like http://jsfiddle.net/t3Gjx/?

HTML:

<div class="wrapper">
    <div class="left">Left</div>
    <div class="center">
        <img src="http://upload.wikimedia.org/wikipedia/commons/8/80/A-Caracas.png" alt="img" />
    </div>
    <div class="right">Right</div>
</div>

CSS:

.wrapper{
    text-align:center;
    border:2px solid blue;
    font-size:0;
}

.wrapper>div{
    display:inline-block;
    text-align:left;
    vertical-align:top;
    border:2px solid red;
    font-size:16px;
}

Edit:

As Zoltan Toth said, if the window width less then the elements combined width, they will stack vertically and not beside each other.

If you don’t want that, add

.wrapper{
    white-space:nowrap;
}

See it here: http://jsfiddle.net/t3Gjx/1/