Question

I have these elements:

<div id="button1"></div>
<div id="button2"></div>
<div id="big"></div>

…which need to be displayed like this:

|------------------|  |---------|
|                  |  | button1 |
|                  |  |---------|
|                  |
|       big        |
|                  |
|                  |  |---------|
|                  |  | button2 |
|------------------|  |---------|

What is the cleanest way using CSS to make the buttons align to the top and bottom of the big div? I want to be able to resize the big div. Also, the space between the big div and the buttons is a constant in pixels.

It’s OK to add a wrapper element, but I’d prefer if I didn’t have to. Anyway, I wouldn’t know how to do it with the wrapper element either 🙁

Answer 1

Put the buttons inside the “big” box:

<div id="big">
    <div id="button1"></div>
    <div id="button2"></div>
</div>

You can position the buttons relative to their container like so:

#big {
    position:relative;
    width:400px; height:400px;
    overflow:visible;
} #button1, #button2 {
    width:100px; height:50px;
    position:absolute;
    right:-120px;
} #button1 {
    top:0px;
} #button2 {
    bottom:0px;
}

Here’s the fiddle:
http://jsfiddle.net/Rcnbk/1/

The trick is to set the parent position:relative and the children position:absolute