I'm trying to get 3 child div's to display inside a parent div. This is part of a navigation menu, where I'm using jQuery on the div's. So, I have the first child div, which when clicked on, the 2 child div's will appear. The parent div keeps control of the positioning of the child div's.

It can't seem to display on my browser (Chrome). Surely someone must know the answer to this, or spot something I overlooked.

<div id="accountContainer"><div id"accountTitle"></div><div class="registerLink"></div><div class="loginLink"></div></div>
#accountContainer
{
	position:absolute;
	top:2%;
	left:42%;
	width:16%;
	height:auto;
	background-color:#CCCC33;
}

#accountTitle
{
	height:140px;
	width:150px;
	background-color:#fc0464;
	display:block;
	color:#33FFFF;
	font-size:24px;
	-moz-border-radius:15px;
	border-radius:15px;
}

.registerLink, .loginLink
{
	display: inline-block;
	height:50%;
	background-color:#330000;
	margin: 0;
    padding: 0;
    vertical-align: top;
}

It is because of your container 'height: auto'.

#accountContainer
{
	position:absolute;
	top:2%;
	left:42%;
	width:16%;
	height: -px; /* Set some height here */
	background-color:#CCCC33;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.