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

Question

This is my code  please see fiddle here     lt div class  container  gt       lt div class  hero-unit  gt           lt h2 gt Welcome lt  h2 gt            lt p gt Please log in lt  p gt           lt div id  login-box  class  pull-right control-group  gt               lt div class  clearfix  gt                   lt input type  text  placeholder  Username    gt               lt  div gt               lt div class  clearfix  gt                   lt input type  password  placeholder  Password    gt               lt  div gt               lt button type  button  class  btn btn-primary  gt Log in lt  button gt           lt  div gt       lt  div gt   lt  div gt    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

User · Answer

just put  login-box before  lt h2 gt Welcome lt  h2 gt  will be ok    lt div class  container  gt       lt div class  hero-unit  gt           lt div id  login-box  class  pull-right control-group  gt               lt div class  clearfix  gt                   lt input type  text  placeholder  Username    gt               lt  div gt               lt div class  clearfix  gt                   lt input type  password  placeholder  Password    gt               lt  div gt               lt button type  button  class  btn btn-primary  gt Log in lt  button gt           lt  div gt           lt h2 gt Welcome lt  h2 gt            lt p gt Please log in lt  p gt        lt  div gt   lt  div gt    here is jsfiddle  http   jsfiddle net SyjjW 4

User · Answer

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    lt div class  container  gt       lt div class  hero-unit  gt            lt div id  login-box  class  pull-right control-group  gt               lt div class  clearfix  gt                   lt input type  text  placeholder  Username    gt               lt  div gt               lt div class  clearfix  gt                   lt input type  password  placeholder  Password    gt               lt  div gt               lt button type  button  class  btn btn-primary  gt Log in lt  button gt           lt  div gt            lt h2 gt Welcome lt  h2 gt            lt p gt Please log in lt  p gt        lt  div gt   lt  div gt    Or enclose the left block in a pull-left div  and add a clearfix at the bottom   lt div class  container  gt       lt div class  hero-unit  gt            lt div class  pull-left  gt              lt h2 gt Welcome lt  h2 gt              lt p gt Please log in lt  p gt            lt  div gt            lt div id  login-box  class  pull-right control-group  gt               lt div class  clearfix  gt                   lt input type  text  placeholder  Username    gt               lt  div gt               lt div class  clearfix  gt                   lt input type  password  placeholder  Password    gt               lt  div gt               lt button type  button  class  btn btn-primary  gt Log in lt  button gt           lt  div gt            lt div class  clearfix  gt  lt  div gt        lt  div gt   lt  div gt

User · Answer

Keep the h2 at the top  then pull-left on the p and pull-right on the login-box   lt div class  container  gt     lt div class  hero-unit  gt        lt h2 gt Welcome lt  h2 gt        lt div class  pull-left  gt         lt p gt Please log in lt  p gt       lt  div gt        lt div id  login-box  class  pull-right control-group  gt           lt div class  clearfix  gt               lt input type  text  placeholder  Username    gt           lt  div gt           lt div class  clearfix  gt               lt input type  password  placeholder  Password    gt           lt  div gt           lt button type  button  class  btn btn-primary  gt Log in lt  button gt       lt  div gt        lt div class  clearfix  gt  lt  div gt      lt  div gt   lt  div gt    the default vertical-align on floated boxes is baseline  so the  Please log in  exactly lines up with the  Username   check by changing the pull-right to pull-left

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

Examples related to html

Examples related to css

Examples related to twitter-bootstrap