The styling in CSS does not accurately reflect its relationship to the parent

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

Answer №1

Did you attempt to include the following:

display: block;

within the parent container?

Answer №2

I discovered the root cause of my issue. The child divs were not positioning themselves relative to the parent as intended, but rather according to the browser due to:

position:relative;

I made the switch to:

position:absolute;

Credit to this source

A Relative Positioned element is positioned relative to its default position. It allows the content of the element to be moved and overlap with other elements while still maintaining reserved space in the normal flow. Typically used for 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 becomes the html tag.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you save the output of console.log in JavaScript to a variable and then use that variable in HTML?

Here is the code snippet I've been working on. The first part consists of JavaScript code, and the second part includes HTML. $('#table').on('check.bs.table', function (e, row) { checkedRows.push({First: row.fname, Second: row ...

Using canvas elements to position divs in three.js

I am currently in the process of developing a custom animation player using Three.js for rendering objects, which is functioning perfectly. However, I am encountering difficulty when trying to incorporate control options at the bottom of the player (such a ...

Padding-left may cause text to not wrap correctly

Every link in the left menu has a padding-left: 15px;. This is done to accommodate a background image (the blue arrow). However, when text wraps (like in "Paintings, prints, and watercolours"), it seems to ignore the padding. I've searched extensive ...

Is it acceptable to utilize a UUID as an HTML tag ID without encountering any problems?

I need to handle dynamic content accessible through an index on a side panel. When a user selects an element from the side panel, I use the ID to determine which data they're requesting so that I can generate the corresponding content for the main sec ...

Locate an element by its TEXT using SeleniumBase

When using SeleniumBase, I have a requirement to click on an element that is identified as shown below: <span class="text"> Contato PF e PJ </span> The specific text inside the element (Contato PF e PJ) needs to be ...

The media does not need to be applied to the ".nav__btn" class

How can I hide an element with the ".nav__btn" class by setting its display to none when the screen width is at least 768px? I tried the following media code but it doesn't work. Media Code @media (min-width: 768px) { .nav__btn { display: ...

Floating multiple block-level elements within an <li> tag in HTML allows for greater control over the layout and

I am facing a complex issue that requires attention. Let me explain the situation: There is an unordered list consisting of list items displayed vertically with alternating background colors, all having the same width within a fixed-width div. Some list i ...

What could be causing my bootstrap-switch to malfunction?

Here is the snippet of code I am working with: jQuery.each($('.onoffswitch-checkbox'), function(i, slotData) { console.log($(slotData).bootstrapSwitch('state')) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1 ...

Retrieve input value in Angular 8 using only the element's ID

Can the value of an input be obtained in Angular 8 with TypeScript if only the element's id is known? ...

Selenium was unable to find the p tag element on the webpage

I apologize for reaching out to you all for assistance with such a basic task, but I have tried everything in my toolkit and still can't seem to figure it out. I've experimented with partial xpath, full xpath, and various CSS selectors. I am see ...

Tips for Placing a Div in a Precise Location

I'm currently working with Bootstrap and I'm attempting to replicate a layout similar to the one used by Twitter, as shown in the screenshot below. The specific part I'm struggling with is where the profile picture is located. I want to add ...

What is the best way to create a JQuery click event that applies to every button on my webpage?

I am working on a website settings page where logged-in users can edit the content displayed on the public page. I have a form that uses AJAX to update the content when submitted. My main question is how to modify the code so it can determine which text b ...

Looking to update a component in Vue 3 and Laravel 9 without the need to reload the entire webpage

Looking for a solution to refresh the header component upon clicking the logout button, in order to display the login and register options without refreshing the entire page. Any effective suggestions on how to achieve this are greatly appreciated. The l ...

Is CodeMirror's PHP mode failing to function properly?

There seems to be an issue with displaying the highlighted text, and I'm not sure why. Links: <link rel=stylesheet href="http://codemirror.net/mode/php/../../doc/docs.css"> <link rel="stylesheet" href="http://codemirror.net/mode/php/../../l ...

"Creating Search Engine Optimization friendly URLs: A Step-by-Step

Looking for ways to optimize my dynamic URL! http://www.example.com/hamlyn/page.php?id=14 Any suggestions on shortening or making it more search-engine-friendly? ...

Issue with form validation, code malfunctioning

I am struggling to figure out why this validation isn't working. Here is the HTML code I'm using: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type='text/javascript' src="scripts. ...

Adjusting the sound levels of an HTML audio element using JavaScript

I'm looking to adjust the volume of an <audio> element when a user clicks on an image. HTML: <div id="cloud"> <img name="jsVolumeButton" src="images/cloud.png" width = "140px"/> </div> <audio id="player" src="sounds/rain. ...

Tips for properly aligning an image within an owl carousel

Currently, I am attempting to center a small image within the owl carousel. While I have managed to center it when it's active and in the center, I'm encountering issues when the item no longer carries the "center" class. You can access Owlcarou ...

Using the cordova-plugin-file to access and play video files stored on an external SD

I am in need of assistance with displaying an image and playing a video file from the root directory of an external SD card in my Cordova wrapped HTML project. I couldn't find a suitable place to ask these questions on the GitHub page for the cordova- ...

What is the best way to transform the data received from this function into a DataTable that can be used with the Google Charts API?

Is there a way to easily convert the data returned by this function into a format that Google Charts API can read? public function ajax_get_dates(){ $data = ([['date1' => '04/08/2016'], ['date2' => '05/08/2016& ...