Positioning a div below a variable height <UL>

I have a menu div on the left hand side of the screen. This menu div contains a <UL> that serves as the menu. The height of this UL is variable as it is user dependant, and I want to have a DIV below the UL at all times. How would I go about that?

Here's the code I have at the moment:

Left menu div

#left
{
[INDENT]padding:0px; 
margin:0px; 
overflow:hidden; 
position:absolute; 
color:#000000; 
left:0px; 
top:107px; 
bottom:0px; 
width:185px; 
font-size:1.2em; 
z-index:4; 
overflow:auto; 
background-color:#ffffff;[/INDENT]}

Code (markup):

UL:

#menu 
{
[INDENT]list-style-type:none; 
padding:2px; 
margin:0px; 
width:170px; 
position:absolute; 
top:0px; 
left:0px; 
z-index:100;[/INDENT]
}

Code (markup):

How would I need to style the DIV because I can't seem to get it to work?

Example can be found at: http://www.dvolve.org/ktt/

 

The div would NATURALLY stay underneath the menu IF it could see the menu. It cannot. Why? Because of this:

#left {
padding:0px; 
margin:0px; 
overflow:hidden; 
[b]position:absolute; <--here be teh problem[/b]
etc...

Code (markup):

When you do position: absolute, it is no longer "in" the page, but sitting on top of it. So the div who comes afterwards cannot see it, and is not pushed down by it. Don't use absolute positioning for anything that has to be "in" the page-- they are blind to the page, and the page is blind to them.

You might want to read up on CSS positioning, if you're going to be playing with the page for a while, as there are many rules about this, and they take a little time to learn.
If your local library has HTML UTopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer, check it out and read up on aboslute, relative positioning and floats.

 

Well the basic layout of the page is the following:

<div id="left">
   <ul id="menu">
      <li>Bla</li>
   </ul>
   <div id="status">
      Bla
   </div>
</div>

Code (markup):

Seeing as both are inside the left div, shouldn't I be able to just position these to to one another?

 

Well, the ul is also absolutely positioned:

#menu {
list-style-type:none; 
padding:2px; 
margin:0px; 
width:170px; 
[b]position:absolute; 
top:0px; 
left:0px;[/b]
etc...

Code (markup):

What you'd want is to say nothing about the positioning of the ul, NOR of the div who comes afterwards. Try it with nothing. See what it looks like. Use margins to make the appropriate distance between each other. Then, when you add li's, your ul grows, and should push the div who is also inside #left further down (so long as you never set a height on #left-- that would not leave enough room for the div).

See, you don't NEED to position them to each other. That's the beauty of using the Document Flow. It has several default rules it already works with, so you only need to write code for when you want things to NOT follow those default rules. This is how you keep your code clean. Boxes like uls and divs naturally try to be 100% width of their parents, and naturally stack underneath each other, and naturally push down those below them. All boxes try to be as close to the top left corner of the page or their parents as they can, and they can push each other away from that corner with their bulk.

 

That worked like a charm, thanks!!