title: css information box with button
body: <p>I have been trying to get this working right, and I am not sure if this solution is correct..</p>
  
  <p>I know I could put multiple divs in my solution but I wanted the code as short as possible..</p>
  
  <p>It is basically a box with a button and some information.. is this the simplest way of doing it?</p>
  
  <pre><code>.actionbox {
      width:90%;
  padding-top:20px;
  padding:20px; 
      background-color: #999999;
      border-left:10px solid #2ecc71;
      display:inline-block;   
  
      }
  
  .ashbox{background-color:#34495e;color:white;}
  
  
  .button{
  display: inline-block;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
      font-family:'PT Sans',helvetica;
  
  }
  h1 { margin:0}
  .button,.button.green{background:#69c773;color:#FFF;-webkit-box-shadow:0 4px 0 0 #51a65f;-moz-box-shadow:0 4px 0 0 #51a65f;box-shadow:0 4px 0 0 #51a65f;}
  
  .floatright {float:right;}
  .floatleft {float:left;}
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div style="width:800px; margin:0 auto;"&gt;
  &lt;div class="actionbox ashbox"&gt;
  
  &lt;h1 class="floatleft"&gt;Open Box&lt;/h1&gt;
  &lt;a href="test.html" class="button floatright"&gt;Learn More Info&lt;/a&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/6LHrD/" rel="nofollow">Working Demo JSFIDDLE</a></p>