Positioning some buttons on top and bottom of a large div
I have the following items:
<div id="button1"></div>
<div id="button2"></div>
<div id="big"></div>
... which should display like this:
|------------------| |---------|
| | | button1 |
| | |---------|
| |
| big |
| |
| | |---------|
| | | button2 |
|------------------| |---------|
What's the cleanest way to use CSS to align buttons at the top and bottom of a large one div
? I want to be able to resize large div
. In addition, the space between the large div
and the buttons is constant in pixels.
OK to add a shell element, but I would prefer it if I didn't have to. Anyway, I don't know how to do this with the shell element :(
source to share
Place the buttons in the "large" box:
<div id="big">
<div id="button1"></div>
<div id="button2"></div>
</div>
You can position buttons relative to their container like this:
#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 a fiddle: http://jsfiddle.net/Rcnbk/1/
The trick is to set parent position: relative and children position: absolute
source to share
Create two layout columns of the big div in the left column, a button 1 div filler div and a button 2 div in the right column.
Tutorial Wrapper: http://www.communitymx.com/content/article.cfm?cid=A8BBA
|------------------| |---------|
| | | button1 |
| | |---------|
| | |---------|
| big | | filldiv |
| | |---------|
| | |---------|
| | | button2 |
|------------------| |---------|
source to share