Hola tengo una pregunta y es que no se porque el aside que contiene a las div y el section que seria el contenido principal, no se pueden...

José Efraín Aguilar Rodríguez

Pregunta

student•hace 4 años

Hola tengo una pregunta y es que no se porque el aside que contiene a las div y el section que seria el contenido principal, no se pueden alinear horizontalmente, ya tengo display :inline-block en ambos, he incluso lo he puesto en el main que es el padre de los dos y no me funciona para nada.

Aquí les dejo unas imágenes y el código por si me pueden ayudar, gracias.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Reto Layout</title>
</head>
<body>
    <head>
        <nav>
            <ul class="page-nav">
                <li>Home</li>
                <li>Cursos</li>
                <li>Instructores</li>
                <li>Blog</li>
            </ul>
        </nav>

        <main id="main">
            <aside >
                <div class="side-content"><p>efergerhrthrth</p></div>
                <div class="side-content"><p>efergerhrthrth</p></div>
                <div class="side-content"><p>efergerhrthrth</p></div>
                <div class="side-content"><p>efergerhrthrth</p></div>
            </aside>

            <section class="principal-content">
               <div>
                <p>frfrfrfr</p>
               </div>
            </section><!--  -->
        </main>
    </head>
</body>
</html>```

box-sizing: border-box;

margin: 0;

padding: 0;

}

html{

font-size: 62.5%;

}

.page-nav{

background-color: darkblue;

text-align: right;

width: 100vw;

height: 6vh;

display: inline-block;

}

.page-nav li{

display: inline-block;

color: white;

font-size: 1.6rem;

margin: 5px 5px;

}

#main{

display: inline-block;

}

aside{

display: inline-block;

background-color: darkcyan;

width: 20vw;

height: 94vh;

}

.side-content{

width: 17vw;

height: 20vh;

background-color: rgb(157, 250, 250);

display: block;

margin: 1.6em auto;

border-radius: 1.6rem;

font-size: 1.6rem;

}

.principal-content{

width: 80vw;

height: 94vh;

background-color: chocolate;

display: inline-block;

}```

esta es la misma que la primera,es para que miren que el section esta abajo y no se coloca a la par

José Efraín Aguilar Rodríguez

student•hace 4 años

Muchas Gracias me aclaraste la mente,jajajaj ya lo pude resolver

Daniel Adolfo Ordoñez Rubio

student•hace 4 años

Hola, José :) Lo que puede estar pasando es que la barra de scroll toma un poco del ancho de la pantalla, entonces no tienes exactos los 100vw para darle 20 al

aside

y 80 al

section

; si dejas un poco de holgura, por ejemplo 20 y 78, puedes ver que se ajusta. Por esos pequeños detalles que no controlamos es que se usa más flex y grid hoy en día, :D pero no te equivocaste :thumbsup:.

Hola tengo una pregunta y es que no se porque el aside que contiene a las div y el section que seria el contenido principal, no se pueden...

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]