Positioning some buttons on the top and bottom of a big div

Go To StackoverFlow.com

3

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 :(

2012-04-04 00:35
by cambraca


5

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

2012-04-04 00:41
by tybro0103
how reliable is bottom:0px? does it work in all the browsers - cambraca 2012-04-04 00:42
@cambraca ...ye - tybro0103 2012-04-04 00:43
nice, it kinda works. the only thing missing is making the content that goes after all this markup to show below the thing (a footer for the whole page). position:absolute is making #big not take its space... any ideas - cambraca 2012-04-04 00:48
oh wait it works using relative! (at least on firefox it does - cambraca 2012-04-04 00:49
just add another after i - tybro0103 2012-04-04 00:50
Yeah I meant to put relative on big... fixed no - tybro0103 2012-04-04 00:51


0

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 |
|------------------|  |---------|
2012-04-04 00:39
by JDD
If the height of big div isn't a constant, this isn't going to wor - tybro0103 2012-04-04 00:46
it can if the button1 filldiv and button2 are in a wrappe - JDD 2012-04-04 01:00