Question

I have the following code (available for a test run here):

<div style="margin:10px">
    <div class="alert-message block-message warning">
         <h3>Hello World</h3>
         <p>You're about to take an action which cannot be undone.</p>
         <form method="post" action style="float:right">
             <button class="btn danger" type="submit">For Reals!</button>
              <a href="#" class="btn">Nah.</a>
         </form>
     </div>
</div>

The point above is to have a backgrounded box which has the form controls floating at the bottom right of the alert.

Unfortunately, as you can see in the example, the form items are apparently not included in layout, since the background doesn’t extend to cover them. Is there a way around this?

You can view the edit page here: http://jsdo.it/rfkrocktk/h5IL

Answer 1

You’re needing to clear the floats so it brings it back down to a base level.
Code is tested and works.

<div style="margin:10px">
    <div class="alert-message block-message warning">
    <h3>Hello World</h3>
    <p>You're about to take an action which cannot be undone.</p>
    <form method="post" action="" style="float:right">
    <button class="btn danger" type="submit">For Reals!</button>
    <a href="#" class="btn">Nah.</a>
    </form>
<div style="clear:both"></div>
</div>
</div>