Floating div make parent grow?
 

Hi. I have this website: http://www.foxcalluk.co.uk/Redesign/page.html and I would like the div for the menu on the left to always be the same height as its parents div.

Using "normal" html and css, setting the menu to height:100% works fine. However, I'm using an XHTML 1.1 doctype and it wont work.

Any ideas?

Just a wild stab in the dark, but have you tried setting it to 90 -> 99% instead? it may well be some sort of new restriction on these things. (I've not used XHTML 1.1 yet ;) )

You don't mention a browser, which is an important piece of information. For instance, using an unrecognized doctype will generally throw a browser into a default, or "quirks" mode. IE does not support XHTML. In quirks mode it will not treat a box model according to the definitions of the W3C. Google "box model" and you will find many descriptions of the problem and hacks for working around it.

Bear in mind that default values for margins, spacing, etc., are not always the same from browser to browser. One wants to be specific.

Feel free to be wary of responses that indulge in voodoo, also known as SWAG (sophisticated wild-ass guess) or SHIT (shot in the dark).