Menu
I'm building a prototype for a Web Application and I have a problem with div overlapping.
I have a div called #menu, with width: 15%;, and inside of it, I have a child div called #list with width: 100%;.
At a first glance, it seems that the child div is not respecting the limit of the parent div, remembering that the child div has position: absolute;.
There a some questions about this subject, but I didn't found any question that suits to my case. Some of the questions talks about applying clear: both on all divs or to apply display: inline-block;, but nothing worked.
Any help would be much appreciated.
<html>
<head>
<title> PROTOTYPE - opcion.html</title>
<style type="text/css">
body {
margin: 0;
}
#menu {
display: block;
height: 100%;
width: 15%;
background-color:#ff0000;
}
#list {
width: 100%;
top: 180px;
position: absolute;
}
ul {
background-color: aqua;
display: block;
padding: 0;
list-style: none;
}
li {
margin: auto;
width: 100%;
padding: 10px 0px 10px 10px;
border-bottom: 1px solid rgba(0,0,0,.6);
}
li a {
color: #ffffff;
font-size: 25px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<div id="list">
<ul>
<li> <a href="#">Customers</a> </li>
<li> <a href="#">Students</a> </li>
<li> <a href="#">Teachers</a> </li>
<li> <a href="#">Android App</a> </li>
</ul>
</div>
</div>
</body>
</html>
342
Just add position:relative to #menu. your absolute container will respect the parent's attribute that has a position relative.
To learn more about position https://developer.mozilla.org/en-US/docs/Web/CSS/position https://css-tricks.com/almanac/properties/p/position/
'clear ' is required only when you float an element.
62
Nice title. The parent div needs to have a position of relative in order to have the absolute positioned element be contained inside it. Add this code to your style:
#menu {
position: relative;
}
answered Nov 29 '25 17:11
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With