How to stop block level elements from expanding through a floated element

Question

I'm using Twitter Bootstrap 2.3.2 to create a stacked nav next to a floated div. You can see it here: https://www.tntech.edu/studentaffairs/orientation-and-student-success/

For some reason the list elements are expanding through the info box div which is floated right. I can't understand why. The P elements above it work like normal. What gives? Thanks in advance!

Answer 1

Just slap overflow: auto on your ul like so:

 .nav.nav-pills.nav-stacked {
    overflow: auto;
 }

And that will solve it.

The reason this works is that setting a specified overflow (other than visible, the default) will create a new block formatting context, forcing the element to respect the bounds of the floated element's block formatting context.

Take a look at the Block Formatting Context spec, too. It's fascinating.