Por si necesitas ayuda a la hora de posicionar un contenido lateral en la web, aquí te proporcionamos un ejemplo de código que crea un menú lateral. Analízalo. Este código podrás modificarlo y adaptarlo a las necesidades de tu página web:
El código HTML
<body>
<div class="lateral">
<header>Indice</header>
<ul class="menuVert">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="/">item 4</a></li>
</ul>
</div>
<div class="principal">
Aquí está el contenido de este bloque.
Rellena con suficiente espacio para que supere
la altura de la pantalla y aparezca el scroll.
</div>
</body>El estilo CSS
@charset "utf-8";
html{
height:100%;
}
body{
width: 80%;
height: auto;
margin:0 auto;
background: aliceblue;
}
.lateral{
box-sizing: border-box;
width: max(8%, 200px);
display: inline-block;
position: fixed; padding-top: 30px
}
.principal{
margin-left: max(10%, 200px);
padding: 0 10px;
height: 100%;
text-align: justify;
background:white;
}
/*Hasta aquí ya tenemos un menu lateral fijo,
ahora viene ponerlo bonito*/
.lateral header{
font-weight: bold;
font-size: 1.5rem;
text-align: center;
border-bottom: 1px solid black;
background: aqua
}
.lateral ul{
list-style:none;
padding-left:0;
margin-top:0;
}
.lateral ul li{
display:block;
position: relative;
padding: 8px 10px;
margin-left:0;
border-bottom:1px solid #060696
}
.lateral ul li a{
color: black;
text-decoration:none;
}
.lateral ul li a:after{
content: ' ';
position:absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.lateral ul li:hover, .lateral ul li:hover a{
background: blue;
color: white;
}