No puedo hacer que el main y el aside se alineen. Uno me queda debajo del otro, en lugar de al lado.

Rubén Cuello

Rubén Cuello

Pregunta
studenthace 5 años

No puedo hacer que el main y el aside se alineen. Uno me queda debajo del otro, en lugar de al lado.

10 respuestas
para escribir tu comentario
    Esteban Casallas

    Esteban Casallas

    studenthace 5 años

    jaja así es, mas adelante veras responsive y todo eso soluciona de una forma bella todos esos problemas !!

    Rubén Cuello

    Rubén Cuello

    studenthace 5 años

    Gracias. Ahora pruebo. Noto que al cambiar las dimensiones de la ventana se deforma todo. jaja. Crei que al trabajar con vh ,vw y porcentajes esas cosas no iban a pasar.

    Esteban Casallas

    Esteban Casallas

    studenthace 5 años

    No te preocupes, manejar las medidas así es difícil, por eso existen propiedades como auto que solucionan esto !!

    Rubén Cuello

    Rubén Cuello

    studenthace 5 años

    Perdón debí aclarar ese detalle antes: Al principio intenté simplemente hacer que el ancho del aside y del main sumaran 100%. Como no tenía ni margin, padding etc, pensé que no había problemas. Al poner 25 y 75 los width respectivamente uno de los contenedores (el main) ya no se ponía al lado, sino que iba a un nivel diferente. Por eso le resté una muy pequeña parte del width a uno de los contenedores.

    Esteban Casallas

    Esteban Casallas

    studenthace 5 años

    No vi el código antes de comentar, bueno el width es el causante, si revisas el aside lo tienes en 24.7% y el main en 75% la linea es por el .3 % restante, hay varias formas de arreglarlo, puedes poner el aside en 25 y el main en auto, y colocarlos ambos dentro de un div, saludos !!

    Esteban Casallas

    Esteban Casallas

    studenthace 5 años

    Bro es difícil poder ayudarte así, lo que te recomiendo es usar devTools, Platzi tiene un curso 5 ⭐ de esta herramienta: https://platzi.com/clases/devtools/

    Rubén Cuello

    Rubén Cuello

    studenthace 5 años
    <!DOCTYPE html> <html> <head> <title></title> <style> * { box-sizing: border-box; margin: 0; padding: 0; } main { background-color: #FA4D4D; width: 75%; height: 77vh; display: inline-block; vertical-align: middle; align-items: middle; } aside { background-color: #6FADE6; width: 24.7%; height: 77vh; display: inline-block; vertical-align: middle; align-items: middle; } header { background-color: #85B587; height: 15vh; } footer { background-color: #CDBF9F; height: 8vh; font-size: 1.2rem; padding: 10px; text-align: right; } .parrafo { background-color: #CEBEFC; margin:10px; padding: 20px; font-size: 0.9rem; border-radius: 3px; } .nav li { display: inline-block; float: right; padding: 10px; font-size: 1.1rem; } .logo { font-size: 1.5rem; padding: 10px; } main p { font-size: 1.1rem; font-family: Verdana; padding: 10px; } </style> </head> <body> <header> <p class="logo">Logo</p> <ul class="nav"> <li>Home</li> <li>Cursos</li> <li>Instructores</li> <li>Blog</li> </ul> </header> <aside> <div class="parrafo"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </div> <div class="parrafo"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </div> <div class="parrafo"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </div> <div class="parrafo"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </div> </aside> <main> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </main> <footer> <p>Footer con muy poca imaginación</p> </footer> </body> </html>```
    Luis Lira

    Luis Lira

    studenthace 5 años

    Podrías pasar tu código para poder revisar el otro error que estás teniendo?

    Rubén Cuello

    Rubén Cuello

    studenthace 5 años

    Ya lo solucioné. Tenía un error muy tonto. Tengo casi terminado el desafío. Único inconveniente ahora: El aside y el main tienen una linea vertical, un espacio en blanco separándolos. No tengo ni margin, ni padding, ni border, ni nada parecido. No se que genera ese espacio. Ni tampoco se como quitarlo.

    Esteban Casallas

    Esteban Casallas

    studenthace 5 años

    Hola, compártenos tu código para poder ayudarte, adjunto tuto:

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.

Curso de HTML y CSS [Empieza Gratis]
Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.