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 :(
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
position:absolute
is making #big
not take its space... any ideas - cambraca 2012-04-04 00:48
Create a two column layout big div in the left column, button 1 div filler div and button 2 div in the right column.
Wrapper Tutorial: http://www.communitymx.com/content/article.cfm?cid=A8BBA
|------------------| |---------|
| | | button1 |
| | |---------|
| | |---------|
| big | | filldiv |
| | |---------|
| | |---------|
| | | button2 |
|------------------| |---------|
bottom:0px
? does it work in all the browsers - cambraca 2012-04-04 00:42