When creating a page with extensive text, it is important for readers to easily navigate between sections. To achieve this, I am looking to have a fixed Index displayed on the left-hand side of the main text at all times. The main text should be centered and occupy about 75% of the screen.
Despite spending several hours working on it, I am struggling to get the layout just right. I keep running into issues where the columns overlap or have awkward white space between them, making it difficult to center them nicely.
Here is the HTML code:
<div class="wrapper">
<div class="row">
<!-- Sidebar -->
<nav id="sidebar">
<ul> Content
<li><a href="#Guidelines">Guidelines</a> </li>
<li><a href="#Geographic Focus">Geographic Focus</a> </li>
<li><a href="#Fields of Interest">Fields of Interest</a> </li>
</ul>
</nav>
<div id="content">
<div id="blog">
</div>
</div>
</div>
</div>
And here is the CSS code:
.wrapper .row {
display: flex;
border-style:solid;
width:100%;
justify-content:center;
align-content: center;
align-self:center;
}
#sidebar {
position: fixed;
display:flex;
border-style:solid;
min-height:100vh;
color:black;
flex-direction:column;
padding-top:70px;
width: auto;
}
#blog {
float: left;
width:75%;
padding:0;
border-style:solid;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}