What breaks the html flow in css?

I'm having a few pr开发者_开发知识库oblems trying to position some divs in my website layout. All of them is related to the div's size. I'm using Chrome's developer tools to inspect the divs and when I mouse over some divs it is just 1px-high, but it has content inside and its content has some height. Shouldn't it have at least the same height of its content?

I don't know if I explained well, so I'm posting some images. I'm using Blueprint CSS Framework and it happens when I use class="span-XX" and inside it I don't use neither class

Here is some images (click to zoom)

The parent div

The div with problem (no height)

The child div

The parent div has class="span-XX", the div with problem has only #search which is this one

I suspect it is some float or positioning issue with css but I don't know what it is and how to deal with it. I have also a list containing the social networks on the top of the site which ul has the same problem.

If you have floats inside, you need to clear them. Apply overflow:hidden; zoom:1; to the parent containing the floats and it should resolve it.

If you have negative margins / position + relative and negative offset and cant use overflow hidden use a clearfix... http://work.arounds.org/clearing-floats/

Your child div has the float property set, so the parent div will not expand height-wise to contain it. To get the behavior you expect, set overflow: hidden on the parent div.