My code includes a div with the ID of "outer" nested inside a parent div with the ID of "Container". I'm attempting to adjust the properties of the outer div relative to its parent, meaning its width, height, and other attributes should be based on the Container div. However, for some reason, these adjustments are not being applied properly. As a result, my menu is also failing to adjust accordingly. Could someone please help me identify the mistake in my code? Thank you.
Here is the HTML code:
<body>
<div id="container">
<header>
<img width="60%" alt="Logo" src="images/logo.jpg">
<div id="divHeader"><br /><br />
<input type="text" placeholder="Enter text here">
<input type="radio" value="Pages" checked="true" name="searchOpt">Pages
<input type="radio" value="Contact People" name="searchOpt"/>Contact People
<input type="button" value="Search"/>
</div>
</header>
<!--pop up menu-->
<div id="outer">
<div id="menu">
<ul id="nav">
<li id="nav1"><a href="">News & Events</a></li>
<li id="nav2"><a href="">Facilities</a></li>
<li id="nav3"><a href="">Research</a></li>
<li id="nav4"><a href="">Programmes</a></li>
<li id="nav5"><a href="">Faculty</a></li>
</ul>
</div>
</div>
</div>
</body>
And here is the CSS code:
body {
background-color:#0a1857;
}
#container
{
width:80%;
height:100%;
background-color:#FFFFFF;
position:fixed;
right:10%;
left:10%;
}
header
{
width:100%;
height:15%;}
#divHeader
{
float:right;}
#outer
{
padding-left:20%;
width:80%;
height:40%;
background-image:url('images/image_31.jpg');
background-repeat:no-repeat;
background-position:center; }
#menu {
position:relative;
top:220px;
right:170px;
width:108%;
height:20%;
text-align:center;
}
#menu a {
display: block;
text-decoration: none;
color: #3B5330;}
#menu a:hover { background: #B0BD97;}
#menu ul li {
font:12px georgia;
list-style-type:none;
float: left;
width: 20%;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background: #979E71;
}
#menu ul li a {
font-weight: bold;
padding: 15px 10px;}
#menu li{
position:relative;
float:left;}
#popup_menu ul li
{
float:none;
}