Tweak pull-right in bootstrap

Question

I would like the button to also be inside the div with 'border-blue', but it doesn't. If I remove 'pull-right' from the button's class, it will be in. So, how to keep the button inside the div, and also float it to the right.

http://www.bootply.com/KRnvb6Kk4W

HTML :

<form id="LoginForm">
    <div class="container-fluid">
        <div class="row-fluid">                
            <div class="centering text-center col-lg-3 border-blue">
                <div class="drop-shadow raised">
                    <input type="text"/>
                </div>
                <br />
                <div class="drop-shadow raised">
                    <input type="text"/>
                </div>
                <br />
                <div>
                    <span id="spMsg"></span>
                    <button type="submit" class="btn-login-base pull-right">
                        <i class="fa fa-share-square"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    </form>

CSS :

.border-blue {border:1px solid blue;}

.row-fluid 
{
  height: 100%; 
  display:table-cell; 
  vertical-align: middle;  
}

.centering 
{
  float:none;
  margin:0 auto;
  padding:0;  
}
.btn-login-base
{
    width:32px;
    height:34px;
    padding:0;
    background:transparent;
    border:none;        
}
//bootstrap's .pull-right{float:right !important;}

Answer 1

Add .clearfix class to .border-blue, like this:

 <div class="centering text-center col-lg-3 border-blue clearfix">

It will force the container not to collapce because of the inner floated elements.