CODEWITHSUNDEEP
htmlcssparent-child
NightFury
NightFury

Reputation: 13546

CSS not applied relative to parent

I have a div with ID= "outer" inside a div whose ID is "Container". I am trying to adjust outer div properties relative to parent i.e its width, height etc should be relative to Container div. I can't understand why it is not being applied. I know because of this reason, my menu is also not adjusting. Can please someone figure out mistake in my code? Thanks.

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>

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;
 }

Upvotes: 0

Views: 170

Answers (2)

NightFury
NightFury

Reputation: 13546

I got the main cause of my problem. My child div's were positioning and arranging themselves according to the Browser, not as that of parent because of:

position:relative;

I replaced it with:

position:absolute;

Reference from here

A Relative Positioned element is positioned relative to its normal position. The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.Used for element to act as Containers.

An Absolute positioned element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is html tag.

Upvotes: 0

Max
Max

Reputation: 2571

Have you try adding:

position: relative;

to the outer div?

Upvotes: 1

Related Questions