Div not positioning as it should - CSS problem

I'm working on a joomla site and customizing the template for the client. First of all let me say this, I suck at getting things to be "beautiful"开发者_如何学Go but I try, test and research a lot, I have not found the reason for this not working.

Ok let me explain: I have this HTML that loads the menu and then puts an empty div (for clearfix) and then opens another div for the next element.

(I'm having issues with the code parser on Stack overflow So I'm posting the code to pastie and linking from here.)

Ok so I have this html and this css

now as I see it, normally, the wrapper_menu should have at least 130px height (min-height property) and grow if needed. then the .clr clears the float, and the next element , since its a div should be put under it. So AFTER the menu_wrapper content. It does not, the menu_wrapper is always 130px height, and when it grows, the whitebox element gets on top of it ( although the text is still visible, but not clickable). I tried putting overflow auto on the wrapper and still it gets on top but the text is no longer seen. you can see the test site here

I really don't know what else to try in order to get this menu's div to grow with the content.

thanks

Cromestant.

You are using position: absolute; on ul.menu which is taking out the ul from the document flow. Remove it and it will look much better.