a question about menu with background image and variable height

[supita]

The following example uses two images as background for making a menu that adjust its height if the text size increases. For this purpose, the variable text size, you should not specify the menu height.

http://www.dynamicdrive.com/style/csslibrary/item/css_indent_menu/

I have a menu with variable height and a background image, I put the background image in the ul and I don't specified it's height.

If I use overflow:hidden for the ul instead of float:left, it works ok, and I understand why it works that way.

What I don't understand is why using float:left for the ul forces that the height of the elements inside the ul render properly.

If you know why it works, please share it with me :)

Thanks,

Supita

[deathbycheese]

use both?

[supita]

use both?

I want to know why it works like that :confused: why a container with float property gets its child height if they float too.

[deathbycheese]

Please post a link so we can take a look at how you're using it.
dbc

[auntnini]

For me, CSS float property is "buggy" compared to deprecated align.

I'm trying to remember some of the float fixes. Because floated element is partially removed from normal HTML flow, nested/child floated element sticks out of bottom of parent: FIX = float parent element too ["as defined in CSS2.1, a floated element will expand to contain any floated elements that descend from it"]; or add an overflow property ['to resolve the collapsing parent issue is to add overflow: hidden or overflow: auto to the parent element"]. Also give floated element a width, and display:inline-block to fix IE margin problem.

While it didn't list the above fixes I'm trying to remember, these are informative http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ and http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/. See also http://gtwebdev.com/workshop/floats/enclosing-floats.php , http://css-tricks.com/795-all-about-floats/ ["One of the more bewildering things about working with floats is how they can affect the element that contains them (their "parent" element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing."] , http://complexspiral.com/publications/containing-floats/ , http://www.alistapart.com/articles/css-floats-101/

[supita]

Please post a link so we can take a look at how you're using it.
dbc

Nop, not online version, I'm not working on a problem, I'm teaching a course of CSS and I found these examples that show that if the container float, it gets the height of their floating childs.

They use it also in this other example

http://www.dynamicdrive.com/style/csslibrary/item/cf-navigation-menu/

and here, with the overflow property the design doesn't look ok



I think that the definition that "floats push the element to the right/left" is not good enough. There's the problem with the height of the float elements, and the solutions with the properties clear or overflow, but that also float solves it?!?!, and it works at least in IE and FF, so, it's not a random behavior

Thanks for the replies :)