I have a div that's meant to take up 100% of the initial screen and needs to be floated left and right. Due to this, I had to set the div = to so the floated elements could take up 100% of the screen. I'm now trying to add after the other divs but that's not working as the navbar does not position under 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 absolutely positioned segment of code and blow is the navbar

      <nav id = "navbar">
        <img src = "assets/logo.png" />
      </nav>

Here is the pertinent css that positions everything

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

I thought this would result in the navbar being positioned on the next page but It just overlaps the absolute div due to the fact that it's taken out of the flow. Is there any way to fix this?

1 Answers

0
Mendel On Best Solutions

My suggestion would be to add a margin-top to the #navbar of 100vh (vh = viewport height). This will allow you to factor in the absolutely positioned elements that are out of the flow of the doc.

Also be sure that #top-news has a top: 0 to ensure it stays at top of doc.

Hope that helps.