Bootstrap: Use .pull-right without having to hardcode a negative margin-top

Question

This is my code (please see fiddle here):

<div class='container'>     <div class='hero-unit'>         <h2>Welcome</h2>          <p>Please log in</p>         <div id='login-box' class='pull-right control-group'>             <div class='clearfix'>                 <input type='text' placeholder='Username' />             </div>             <div class='clearfix'>                 <input type='password' placeholder='Password' />             </div>             <button type='button' class='btn btn-primary'>Log in</button>         </div>     </div> </div> 

I want #login-box to have .pull-right and be at the same height as the p. I can use margin-top: -100px but that feels wrong.

How can I have #login-box at the same height as the p without hardcoding a negative margin-top?

Answer 1

Float elements will be rendered at the line they are normally in the layout. To fix this, you have two choices:

Move the header and the p after the login box:

<div class='container'>     <div class='hero-unit'>          <div id='login-box' class='pull-right control-group'>             <div class='clearfix'>                 <input type='text' placeholder='Username' />             </div>             <div class='clearfix'>                 <input type='password' placeholder='Password' />             </div>             <button type='button' class='btn btn-primary'>Log in</button>         </div>          <h2>Welcome</h2>          <p>Please log in</p>      </div> </div> 

Or enclose the left block in a pull-left div, and add a clearfix at the bottom

<div class='container'>     <div class='hero-unit'>          <div class="pull-left">            <h2>Welcome</h2>            <p>Please log in</p>          </div>          <div id='login-box' class='pull-right control-group'>             <div class='clearfix'>                 <input type='text' placeholder='Username' />             </div>             <div class='clearfix'>                 <input type='password' placeholder='Password' />             </div>             <button type='button' class='btn btn-primary'>Log in</button>         </div>          <div class="clearfix"></div>      </div> </div> 

Answer 2

just put #login-box before <h2>Welcome</h2> will be ok.

<div class='container'>     <div class='hero-unit'>         <div id='login-box' class='pull-right control-group'>             <div class='clearfix'>                 <input type='text' placeholder='Username' />             </div>             <div class='clearfix'>                 <input type='password' placeholder='Password' />             </div>             <button type='button' class='btn btn-primary'>Log in</button>         </div>         <h2>Welcome</h2>          <p>Please log in</p>      </div> </div> 

here is jsfiddle http://jsfiddle.net/SyjjW/4/