css - Align center inside relative container position -

actually have css show 2 cols , inside of cols button end of each col , button must show end of col , in center of col , no code works , when put width of button 5o% of container in col , show bad , , if use pixels show ok , in cases never in center , put code here :

#container { position:relative; width:90%;   margin:auto; border:1px solid #111; overflow:hidden; text-align:center;   }  #col { display:inline-block; width:20%; min-height:300px; text-align:left; background-color:red; margin-bottom:-9000px; padding-bottom:9000px; vertical-align:top;  }  .access { position: absolute; width:50%; height:35px; background-color:#111111; color:#ffffff; border:0px solid; bottom:3px;  }  <div id="container"> <div id="col"> hi , how ?<br>hi , how ?<br>hi , how ?<br>hi , how ?<br>hi , how ?<br>hi , how ?<br>hi , how ?<br>hi , how ?<br>hi , how ?<br>hi , how ?<br>hi , how ?<br>hi , how ?<br>hi , how ?<br>hi , how ?<br>hi , how ?<br>hi , how ?<br>hi , how ?<br>hi , how ?<br>hi , how youi77 ? hi , how ?<br>hi , how ?<br>hi , how ?<br><br> <div style="height:40px;"></div> <input type="submit" name="access" value="access now" class="access" /> </div> <div id="col"> hi , how ?<br>hi , how ?<br>hi , how ?<br> <div style="height:40px;"></div> <input type="submit" name="access" value="access now" class="access" /> </div> </div> 

you can see test here : http://jsfiddle.net/ljzemk11/

i think trying place button @ bottom of each column.

in case, position:relative needs on .col class (becuase you can't re-use ids on page.

#container {    position: relative;    width: 90%;    margin: auto;    border: 1px solid #111;    overflow: hidden;    text-align: center;  }  .col {    display: inline-block;    width: 20%;    min-height: 300px;    text-align: left;    background-color: red;    vertical-align: top;    position: relative;  }  .access {    position: absolute;    width: 80%;    margin: 0 10%;    height: 35px;    background-color: #111111;    color: #ffffff;    border: 0px solid;    bottom: 3px;    z-index: 3;  }

<div id="container">    <div class="col">hi , how ?          <div style="height:40px;"></div>      <input type="submit" name="access" value="access now" class="access" />    </div>    <div class="col">hi , how ?      <br>hi , how ?      <br>hi , how ?      <br>      <div style="height:40px;"></div>      <input type="submit" name="access" value="access now" class="access" />    </div>  </div>