My webpage has a header div, with two nested divs called header-left-box and header-right-box that are floated left and displayed side-by-side horizontally.
Following these divs, I want to include a receiver div that occupies the free space below.
The issue is that the receiver div is not appearing below the other divs; instead, it is overlaying them. How can I ensure that the receiver div is positioned below the other divs?
Below is the code snippet:
<html>
<head>
<style type="text/css">
#header {
position: absolute;
width: 100%;
height: 30%;
margin: 0 auto;
}
#header-left-box {
position: absolute;
float: left;
width: 40%;
height: 100%;
margin-left: 0px;
border: 1px solid blue;
}
#header-right-box {
position: absolute;
float: left;
margin-left: 50%;
width: 50%;
height: 100%;
border: 1px solid red;
}
#header-right-box-content {
position: absolute;
bottom: 0;
left: 0;
}
#header-left-box p {
position: absolute;
bottom: 0;
font-size: 0.9em;
}
#receiver {
position: relative;
width: 98%;
border: solid 1px green;
}
</style>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="header">
<div id="header-left-box">
<p>Left header box</p>
</div>
<div id="header-right-box">
<div id="header-right-box-content">
<p>Right header box</p>
</div>
</div>
</div>
<div id="receiver">Receiver</div>
</body>
</html>