Question

I’m trying to solve OK/CANCEL button placement for our internal app’s.
We want the OK and Cancel buttons to be consistently placed (and styled).

My thought was simply to drop our buttons in a button-wrapper, and then position them in relationship to that wrapper.

The problem comes in, though, with how the wrapper collapses to 0 height when I the button are plucked with position: absolute;.
Because of this collapsed div, my buttons end up dangling.

Example:

/*** css ***/
section.blah{
    border: 1px solid #DDD;
    margin: 2em;
    padding: 1.5em 1em;
}
.button-wrapper{ 
    position:relative;
}
.button-wrapper .proceed{
    position:absolute;
    right:0;
}
.button-wrapper .cancel{
    position:absolute;
    left:0;
}

/*** html ***/
<section class="blah">
    <div class="button-wrapper">
        <button class="btn proceed">OK</button>
        <button class="btn cancel">Cancel</button>
    </div>
</section>

As you can see, we simply want the “OK” type buttons to be on one side, and the “Cancel” type buttons to be on the other.
Is position:absolute; the best way to do this?
If so, what would be an elegant way to ensure that my buttons don’t dangle over other objects?

(NOTE: I thought about just assigning a fixed height to the wrapper, but that seems entirely too in-flexible. The solution needs to allow buttons of any size.)

Answer 1

position: absolute is not really meant for this purpose.

All you really need here is a float:left on .cancel and float:right on .proceed

Once you do this, however, you will still have the same issue of the height being 0 on .button-wrapper. This is where clear:both comes in.

You will need a clear:both after the two floated elements. You can add it in one of two ways:

1) Add a new div after .proceed and .cancel: <div class="clear"></div> with the following css:

.clear {
  clear: both;
}

2) You can use the :after pseudo selector on .button-wrapper, to add the clear with CSS only:

.button-wrapper:after {

  content: '.';
  display: block;
  clear:both;
  visibility:hidden;
  height:0;

}

EDIT: Here is a JSFiddle illustrating option 2: http://jsfiddle.net/P5gj4/