Positioning Problem

Hey, I'm having a little trouble with my site.

Here is my code:

	<div id="header">
	</div>
	
	<div id="login">
		#Login#
	<div>
	
	<div id="wrap">
		<div id="content"> 
                </div>
        </div>

Code (markup):

CSS:

#wrap {
	background: #f0f0f0;
	width: 900px;
	margin-left: 0px;
	margin-top: 10px;
	border: 1px solid #c8c8c8;
	position: absolute;
	margin-bottom: 10px;
}
#content {
	margin-left: 10px;
	margin-top: 1px;
	font-size: 12px;
	padding-bottom: 10px;
} 

Code (markup):

The problem I'm having is I can't place any information below the wrap div because it won't show up. I've tried placing divs below the wrap div but it won't show.
What is happening and how do I fix it?
Thanks.

 

please make it clear that below the wrap div or in-side the wrap div.

 

Below the wrap div.

 

Not causing the problem, but you need to properly close your 'login' div with a </div>...

Your problem is coming from the 'position: absolute;' assigned to the 'wrap' don't know what layout your going for but you can remove that line and it will work.

Can't get into all the positioning rules and effects now but an excellent explanation can be found here:
http://www.barelyfitz.com/screencast/html-training/css/positioning/