2

Estoy intentando colocar el div aside al lado del div article, estos dos divs se encuentran dentro del div main, mi problema es que al intentar color el div aside se me queda abajo del div article. He pensado colocar el div padre(main) en display:inline donde me colocaría los elementos uno al lado del otro pero no funciona. Utilizando el margin-top de forma negativa lo puedo subir hacia arriba pero no queda en la misma posición que el otro div. ¿Por que pasa esto?

<!DOCTYPE html>
<html lang="en">
<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>Mi NavBar</title>
</head>
<body>

    <header class="header">
        <nav class="nav">
            <ul>
                <li>Inicio</li>
                <li>Contacto</li>
                <li>Servicios</li>
                <li>Proyectos</li>
            </ul>
        </nav>
    </header>

    <main class="main">
        <article class="article">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, suscipit. Veniam amet consectetur fugiat vitae, autem delectus id nesciunt laborum? Eius error cumque deleniti nisi? Consequuntur placeat molestiae sint ullam.
            Reprehenderit aspernatur quos voluptatibus illo aperiam accusantium laborum vel velit, obcaecati repellat ad repudiandae vitae minus. Corrupti, eaque hic? Consectetur placeat temporibus mollitia aperiam dolor nisi corrupti quibusdam dicta laboriosam.
            Voluptate accusantium nulla voluptas neque, cupiditate culpa tempore velit, in minima earum beatae eaque commodi, animi eligendi sequi. Laudantium, accusamus ab! Facilis recusandae aut placeat numquam fugit dolores deleniti. Eius?
            Et sunt quae dolorum, maiores aspernatur illo autem ea repellendus molestias nemo quod magnam earum quibusdam quisquam, ullam dolores non velit quos odit itaque accusamus rerum, unde ratione. Rerum, dolor!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas itaque et omnis sequi est cupiditate nobis beatae molestiae excepturi sunt dolores officia laborum rem tempore, velit voluptates architecto veritatis similique?
            Fugit laudantium deserunt quis in blanditiis rem est, unde at quod maxime quas fugiat tempore quia nesciunt sed quasi laboriosam possimus quidem, voluptate quo mollitia explicabo velit aliquam quaerat! At?
            Iste eligendi vel adipisci assumenda exercitationem nesciunt sit nemo atque tempora fugiat totam ex, rem dolor accusamus iure cum molestiae minima earum hic molestias nostrum ea itaque ad dignissimos. Deserunt.
            Rem impedit odio iusto nisi ratione exercitationem, accusamus, voluptatibus eius libero, dignissimos veritatis consequuntur. Natus, beatae. Est aut hic maiores, doloremque rerum quo cumque commodi similique, dolorum, dolores quae numquam?
        </article>
        <aside class="aside">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, eaque molestias. Recusandae maxime, in cupiditate iste laboriosam error totam quam, itaque corrupti quos hic distinctio quia consequuntur perspiciatis eos cumque.
            Unde, quidem! Quidem soluta esse, praesentium vitae in sequi omnis, non tempore quod tempora qui a recusandae molestias ipsum facere quia deleniti, laboriosam assumenda facilis. Molestiae deserunt voluptas rerum similique!
        </aside>
    </main>
   
    
</body>
</html>

Hoja CSS:

body {
    margin:0px;
    background-color: aqua;
}

.header {
    background-color: black;
}

.nav {

    width: auto;
    text-align: right;
    font-size: larger;
    color: green;

}

.nav li {
    display: inline;
    margin-left: 20px;
}

.main {
    border: 2px solid red;
}

.article {
    border: 2px solid yellow;
    width: 59%;

}

.aside {
    border: 2px solid salmon;
    display: block;
    width: 40%;
    margin-left: auto;

}

3 respuestas 3

1

Si no requieres usar Flex, puedes usar "display: inline-block", seguidamente puedes posicionar el aside con "vertical-align".

body {
    margin:0px;
    background-color: aqua;
}

.header {
    background-color: black;
}

.nav {

    width: auto;
    text-align: right;
    font-size: larger;
    color: green;

}

.nav li {
    display: inline;
    margin-left: 20px;
}

.main {
    border: 2px solid red;
}

.article {
    display: inline-block;
    border: 2px solid yellow;
    width: 59%;

}

.aside {
    border: 2px solid salmon;
    display: inline-block;
    width: 40%;
    margin-left: auto;
    vertical-align: top;
}

1

De esta forma podrías hacerlo.

main {
  width:250px;
  height:150px;
  background: red;
  position:relative;
}

main div {
  display:inline-block;
  width:100px;
  height: 100px;
  background: yellow;
}
<main>
  <div>Div 1</div>
  <div>Div 2</div>
</main>

0

Puedes probar usando la propiedad flex

<main>

        <div class="content">
            Contenido
        </div>

        <aside>
            Sidebar
        </aside>

    </main>

Y en tu css

main {
            width: 100%;
            display: flex;
        }
        main .content {
            width: 80%;
        }
        main aside {
            width: 20%;
        }

Ejemplo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        main {
            width: 100%;
            display: flex;
        }
        main .content {
            width: 80%;
        }
        main aside {
            width: 20%;
        }
    </style>
</head>
<body>

    <main>

        <div class="content">
            Contenido
        </div>

        <aside>
            Sidebar
        </aside>

    </main>
</body>
</html>

1
  • Gracias por la solución pero como soy nuevo la idea no era utilizar flex ya que recién estoy aprendiendo los display inline y block y quería saber si se podría llegar a una solución con esos display
    – Ketzell
    el 27 ene. 2022 a las 23:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.