I'm facing a challenge with a div that is supposed to occupy the entire initial screen and be floated both left and right. In order to achieve this, I had to set the div to equal 100% so that the floated elements could fully utilize the screen space. Now, I am attempting to add content after the other divs, but it's not working as expected because the navbar is not positioning itself underneath the absolutely positioned elements.
<div id = "top-news">
<div id = "top-logo">
<img src = "assets/logo.png" />
</div>
<div id = "focused-story">
<img src = "assets/clinton.jpg" />
</div>
<div id = "story-carousel">
<ul>
<a href = "#"><li>First story</li></a>
<a href = "#"><li>Second story</li></a>
<a href = "#"><li>Third story</li></a>
<a href = "#"><li>Fourth Story</li></a>
<a href = "#"><li>Fifth Story</li></a>
</ul>
</div>
</div>
Above is the segment of code featuring the absolutely positioned elements, and below is the navbar content
<nav id = "navbar">
<img src = "assets/logo.png" />
</nav>
Below is the essential CSS responsible for the positioning of all elements
#top-news
{
width: 100%;
height: 100%;
overflow: auto;
position: absolute;
}
#top-logo
{
width: 100px;
background-color: #d3d3d3;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
position: absolute;
left: calc(50% - 50px);
}
#top-logo img
{
width: 65px;
margin: 0 auto;
margin-left: 14.5px;
padding: 5px;
}
#focused-story
{
width: 50%;
height: 100%;
float: left;
background-color: blue;
}
#story-carousel
{
width: 50%;
height: 100%;
float: right;
background-color: #f6f3ed;
display: flex;
align-items: center;
}
#navbar
{
position: sticky;
top: 100%;
width: 100%;
background-color: #d3d3d3;
height: 50px;
}
Although I expected the navbar to be positioned on the subsequent page, it is actually overlapping the absolute div because it's removed from the document flow. Is there a solution to this issue?