CODEWITHSUNDEEP
htmlcss
roperdo
roperdo

Reputation: 33

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 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 ?

Upvotes: 3

Views: 9058

Answers (2)

Oriol
Oriol

Reputation: 288260

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/

Upvotes: 2

Zoltan Toth
Zoltan Toth

Reputation: 47667

You can use absolute positioning for side elements - DEMO

HTML

<div id="center">
    <div id="left"></div>

    <img src="http://lorempixel.com/200/200" />

    <div id="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;
}

Upvotes: 1

Related Questions