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 inspecting the output in the browser (Chrome 15/FF 7 with firebug) the ul element seems to have height 0 and the li elements are displayed outside of it. When I am commenting out the

float: left; statement from ul.search-inputs li CSS declaration then the height of the ul element is displayed correctly.

Could anybody point me to a solution in order to see correctly the height of the ul element?

Answer 1

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; }