Why for li with style float:left browser evaluates the height of the ul element to 0?

Question

In the code presented on the gist : https://gist.github.com/1341600 I am trying to use ul/li elements for grouping together some search form elements (instead of table). When in

Answer 1

This behavior complies to W3C spec. It's deliberately, but can be a bit confusing first time. Container of the floated content must be shrunken to allow another inline content to flow around it's own one.

E.g. if you have a

<p>
    <img class="float" height="1000">
     sometext
</p> 
<p>
     sometext
</p> 

you probably would expect that some text from the second p flow image.

If you need a container with width and height you can either specify them manually, or apply css overflow:auto or float:left to container;

Answer 2

That's not a bug, it's a feature!

The container of a floated element is shrunken so that other inline elements will flow around it (as per specs).

The 3 options in this case are to:

1. Use a known height value and apply it to the ul element.

   ul { height: 150px; }
   

2. Use the overflow property on the ul element to force the browser to recalculate its height along with all the elements inside of it.

   ul { overflow: hidden; } /* hidden is preferred as it never adds scrollbars */
   

3. Float the container itself. As there is no need to shrink it if it floats by itself.

   ul { float: left; }
   

Answer 3

Add following css:

ul.search-inputs {
    overflow: hidden;
}

Also see this jsfiddle.