how do I keep nested div's to not "leak" out the bottom?

Question

In haml, I have something like this:

#profile
   #photo

   #bio

But what hapens is the #photo "leaks" out of the #profile div. If I inspect it, #profile is a very small box and #photo peaks out of it.

I applied a float:left to #photo so that #bio will sit next to the photo

I seem to run into this alot. What is going on and how do I fix it?

Answer 1

I find that the easiest way is to add overflow:hidden to the container, #profile in your case.

No extra elements needed and no side-effects from clearing left, right or both.

Answer 2

When you have a container with floats inside, you need some way of telling the container to clear the floats at the bottom.

The usual way of doing this is to create an element in the DOM at the end of the container after all of the floating items and tell it to clear:left; whilst also setting it to visibility:hidden; (Assuming your floated items are floating to the left, otherwise use right or both as the clear value)

You can do this with pure CSS as:

#container:after{
  content:".";
  display:block;
  clear:left;
  visibility:hidden;
}

There's always the option of directly adding a HTML element to the bottom of the container however I find the pure CSS way a tad nicer.