I was wondering if there is a way to make the big box moveable to the right of the webpage without putting it below the index on the left (without using bootstrap). Thanks for the help :)
.indice{
width: 12%;
border: solid;}
.cuerpo{
float: right;
width: 87%;
border: solid;}
<body>
<h1>
Centro formativo Lancaster
</h1>
<div class="indice">
<ul>
<li><a href="./index.html">Inicio</a></li>
<li><a href="./informacion.html">Información del centro</a></li>
<li><a href="./alumnos.html">Antiguos alumnos</a></li>
</ul>
</div>
<div class="cuerpo">
<ul>
<h2>Miembros del Centro</h2>
<p>
<ul>
<li>Directora: Jimena Álvarez Carrillo</li>
<li>Jefe de estudios: Gonzalo Menéndez Blanco</li>
<li>Coordinadora: Francisca Bonito Bonilla</li>
<li>Secretaría: Eduardo Pereira Gómez</li>
</ul>
</p>
</ul>
<hr>
</div>
</body>
There are several solutions to this problem, if you don't want to change the layout and use, for example, a container with display flex in row mode, there is a somewhat more basic solution but it achieves the goal:
Process
flex
to make all the elements are aligned on the main axisdiv
one that contains the menus we will apply a given width in percentages, giving the desired separation considering covering 100% of the viewporthr
drawing a line, that can be done directly with CSSdiv
and notul
as it was beforeExample