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.

Answer 2

it's because the <ul> element is styled as float:none; which according to the standard:

The element is not floated, and will be displayed just where it occurs in the text. This is default

Set it to float:left or create a rule with a width for the ul and that should fix it.

Answer 3

Nobody is explaining the basic rule of floated elements adjacent to no floated block elements. In your example, you have something which is floated first, followed by other non-floated blocks:

<ul>floated</ul>
<h1>not floated</h1>
<p>not floated</p>
<ul>not floated</ul>
<h3>not floated</h3>

If you applied a background to all of those non-floated elements, you would see that they all spill behind the floated one. The browser is smart enough to wrap the text accordingly, but the containing block still fills the entire width of the container.

This is just a thing you have to deal with. Once you understand it, you can use it to your power. If you don't want those items to spill behind the floated one, I suggest using margins:

.floated {
    float: right;
    width: 250px;
}
/* for anything that comes after a .floated element */
.floated + * {
    margin-right: 280px;
}