Positionierung einige Tasten auf der Ober- und Unterseite eines großen div

Question

Ich habe diese Elemente:

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

... die wie folgt angezeigt werden müssen:

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

Was der sauberste Weg ist Verwenden Sie CSS, um die Schaltflächen am oberen und unteren Ende des großen div ausrichten? Ich möchte in der Lage sein, die Größe div zu ändern. Auch der Abstand zwischen den großen div und den Schaltflächen ist eine Konstante in Pixeln.

Es ist OK, ein Wrapper-Element hinzuzufügen, aber ich würde es vorziehen, wenn ich nicht müsste. Wie auch immer, ich würde nicht wissen, wie es mit dem Wrapper-Elemente zu tun, entweder :(

Answer 1

Setzen Sie die Schaltflächen in der "großen" Kasten:

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

Sie können die Tasten Position relativ zu ihrem Container li ke 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; 
} 

Hier ist die Geige: http://jsfiddle.net/Rcnbk/1/

Der Trick ist, die übergeordnete Position zu setzen: relative und die Position Kinder: absolute

Answer 2

erstellen zweispaltigen Layout große div in der linken Spalte der Taste 1 div Füllstoff div und Taste 2 div in der rechten Spalte.

Tutorial

Wrapper: http://www.communitymx.com/content/article.cfm?cid=A8BBA

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