help with css flexible height for a div

[Ritesh_4]

Hello, anyone can pls help me with a css issue, where I want to make the height of a div flexible based on the content?
I have 2 divs, the first one being a large div which contains menus, and the second div for text content. The first div is used to display menus items, and can contain up to 3 lines of items, with a width of 750px. However it can also at times contain either 2 or a single line of menus, depending on my menu structure.
I would like, in such cases, to make the 2nd div, with the content, then move up to leave something around 15to 20 px of spacing between the two divs.
How can I proceed? The first div has a height css to it, which in my case is 125px (which is the height when displaying the 3 menu levels)

[paulkd]

Do your divs look something like this?

<div id="container">
    <div id="menu">First</div>
    <div id="content">Second</div>
</div>

[Ritesh_4]

yes in this similar format

[Ritesh_4]

I need to apply the styles, if any, on the menu div so that it resizes automatically when needed

[paulkd]

I'm not understanding your problem. The menu div will automatically size to its contents unless you explicitly make it a fixed height.

[Ritesh_4]

Well the "menu" div has a min-height of 50px, which is normally the height of a single menu level, but also a height of 150px, since if I do not put this it will then overlap on my content area if all 3 levels are displayed. I want to make the "menu" div take only the 50px when 1 level is shown, 100px if 2 levels are active, and the full 150px if all 3 are shown, while also moving the "content area" accordingly so that it does not leave a big empty space if for example only one level of menu is shown. See the image attached, where 2 levels are present, but a big space is left, where the 3rd level should be. The white part is where my content will be...