[AlexLee]

Hi, I need some help here with my CSS layout.

I have 2 main components in my page. The left menu bar and the content section.

My left menu bar is on absolute position. So, it is floating.

And my content section is positioned using CSS.

My problem now is that when the stuff inside the content section is too short, the footer I added at the end will get blocked by the left menu bar, which is floating above it.

So now how do I position my footer to appear after the left menu bar or the content section, depending on which one is longer.

And can someone explain to me what does this mean?

Code:

body>#Menu {width:150px;}

The following would be my CSS with the problem...

Code:

#Content {
	margin:0px 50px 50px 200px;
	padding:10px;
	}

#Menu {
	position:absolute;
	top:240px;
	left:15px;
	width:172px;
	padding:10px;
	background-color:#eee;
	border:1px dashed #999;
	line-height:17px;
/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:150px;
	}

}
#Footer  {
	font-size:11px;
	background-color: #eee;
	text-align: left;
	padding:0px 0px 0px 50px;
	margin:1000px 0px 0px 0px;
	border-style:solid;
	border-color:black;
	border-width:1px 0px;
	line-height:11px;*/
}

[subnet_rx]

that's going to be very hard with absolute positioning. When everything is relative, then the footer will "flow" after them.