Button margin test

clearfixing buttons with padding for right alignment

by SamHasler

HTML

<meta name="description" content="Button margin test" />
<div class="container">
  <h1>TITLE</h1>
  <div>
    Lorem ipsum dolor sit amet, 
    consectetuer adipiscing elit.
    Curabitur suscipit erat vitae massa. 
    Phasellus ut est. Nullam eu urna. 
    Nulla facilisi. Praesent sollicitudin, 
    mauris ut fermentum suscipit, 
    eros ante adipiscing risus, 
    a facilisis orci quam in magna.
  </div>
  <div class="clearfix bg">
    <a class="ifButton">Confirm</a>
    <a class="ifButton">Cancel</a>
  </div>
</div>

<div class="container">
  <h1>TITLE</h1>
  <div>
    Lorem ipsum dolor sit amet, 
    consectetuer adipiscing elit.
    Curabitur suscipit erat vitae massa. 
    Phasellus ut est. Nullam eu urna. 
    Nulla facilisi. Praesent sollicitudin, 
    mauris ut fermentum suscipit, 
    eros ante adipiscing risus, 
    a facilisis orci quam in magna.
  </div>
  <div class="clearfix bg central">
    <a class="ifButton">Confirm</a>
    <a class="ifButton">Cancel</a>
  </div>
</div>
<div class="container">
  <h1>TITLE</h1>
  <div>
    Lorem ipsum dolor sit amet, 
    consectetuer adipiscing elit.
    Curabitur suscipit erat vitae massa. 
    Phasellus ut est. Nullam eu urna. 
    Nulla facilisi. Praesent sollicitudin, 
    mauris ut fermentum suscipit, 
    eros ante adipiscing risus, 
    a facilisis orci quam in magna.
  </div>
  <div class="clearfix bg right">
    <a class="ifButton">Confirm</a>
    <a class="ifButton">Cancel</a>
  </div>
</div>

CSS

h1{
    font-weight: bold;
    margin: 1em;
    background: #AABB00
}
.container {
    background: #CCC;
    --padding: 1em;
    margin: 1em;
    text-align: center;
    width: 200px;
    float: left;
}

.ifButton {
    display: inline-block;
    float: right;
    margin: 0.5em 0 0 1em ;
    cursor: pointer;
    border: 1px solid red; 
}
.central {
    margin-top: 0.5em;
}
.central .ifButton {
    float: none;
}
.bg {background: #DD9999;}

.clearfix {
  overflow: hidden; /* new formatting context in better browsers */
  *overflow: visible; /* protect IE7 and older from the overflow property */
  *zoom: 1; /* give IE hasLayout, a new formatting context equivalent */
}