Stick Two Divs To Another

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 th

Solution 1:

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

HTML:

<divclass="wrapper"><divclass="left">Left</div><divclass="center"><imgsrc="http://upload.wikimedia.org/wikipedia/commons/8/80/A-Caracas.png"alt="img" /></div><divclass="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/

Solution 2:

You can use absolute positioning for side elements - DEMO

HTML

<divid="center"><divid="left"></div><imgsrc="http://lorempixel.com/200/200" /><divid="right"></div></div>

CSS

#left, #right {
    width: 100px;
    background: orange;
    height: 200px;
    position: absolute;
    top: 0;
    left: -100px;
}

#right {
    left: 100%;
}

#center {
    margin-left: 100px; /* width of the left div */position: relative;
    display: inline-block;
}