1

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

Naftuli Kay
  • 87,710
  • 93
  • 269
  • 411
  • See: http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best When you float an element, it changes the containing element's dimensions (in many cases). – Jared Farrish Oct 10 '11 at 03:44
  • I think a common way to handle this is to add a hidden div of 0 area that clears all floats... – jswolf19 Oct 10 '11 at 03:45

3 Answers3

1

If there a float in the child element of the parent so you have to clear the the parent. So, write like this 

.alert-message.block-message{
overflow:hidden
}
sandeep
  • 91,313
  • 23
  • 137
  • 155
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>
Bankzilla
  • 2,086
  • 3
  • 25
  • 52
  • Thanks a lot. I'm kind of new to layout with CSS; not used to all of the weird hacks necessary to do what would seem to be pretty straightforward stuff :) – Naftuli Kay Oct 10 '11 at 04:32
0

Try adding a <div style="clear:both;"></div> after the </form> tag.

test
  • 17,706
  • 64
  • 171
  • 244
  • You can see the result of that [here](http://jsdo.it/rfkrocktk/qiaY). Didn't really help. – Naftuli Kay Oct 10 '11 at 03:51
  • Uh... you're doing it wrong. I tested it my way and it worked... it was the same as Bankzilla's (and I posted first) with his way and it worked.. I guess you did something wrong? – test Oct 11 '11 at 14:10