Home/ Questions/Q 9165165
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T14:50:57+00:00

This is my code (please see fiddle here ): <div class=’container’> <div class=’hero-unit’> <h2>Welcome</h2>

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0