0

Soy nuevo programando, estoy empezando hacer un proyecto, pero tengo una pregunta, como puedo juntar dos div? Asi esta ahorita mi pagina

Y asi es como la quiero, quiero quitar ese espacio en blanco, si alguien por favor me dice como :))

3
  • pon su top a la misma altura
    – Christian
    Commented el 2 ago. 2021 a las 16:44
  • Como lo puedo hacer? tengo que poner el margin-top igual?
    – Elvisito
    Commented el 2 ago. 2021 a las 16:47
  • 2
    @Elvisito por favor lee Cómo preguntar y realiza el recorrido de bienvenida, considera editar y agregar un ejemplo mínimo verificable que le permita ver a la comunidad que llevas
    – user128299
    Commented el 2 ago. 2021 a las 16:51

3 respuestas 3

0

Espero te sirva esta forma, utilizando display: flex en el div contenedor. Lo que hace flex es poner un div al lado del otro mientras haya lugar dentro del elemento padre, cuando el espacio no es suficiente, lo ubica debajo, siempre de izq a der. Saludos ;)

.container {
    display: flex;
    padding: 10px 10px 10px 0px; /*Estas medidas pueden variar al igual que las de width y height. Desde la izquierda: top, right, bottom, right*/
    background-color: green;
}

.s1 {
    background-color: red;
    width: 100px;
    height: 100px;
}

.s2 {
    background-color: blue;
    width: 400px;
    height: 500px;
}
<div class="container">
  <div class="s1"></div>
  <div class="s2"></div>
</div>

0

Lo que debes hacer para que te queden los div alineados de manera horizontal, es agregarle al div los contiene el estilo display en flex, si dicho elemento contiene muchas otras cosas, lo que puedes hacer es crear un elemento que contenga esos 2 div que deseas alinear y a ese agregarle el estilo.

En mi caso lo dejé directamente en el atributo style, pero puedes crear una clase y hacer uso del estilo desde el atributo class.

Te dejo un ejemplo de como quedaría:

div {
  border: red 1px solid;
}
<!-- En el div que tenemos como el contenedor le agregamos la etiqueta style y a este le anexamos el display: flex; -->
<div id="contenedor" style="display:flex;">
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio vitae architecto eligendi cumque enim explicabo commodi. Alias minima laborum enim esse! Exercitationem libero nisi sequi, eius placeat dolorffdfibus voluptas quod.
  </div>

  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio vitae architecto eligendi cumque enim explicabo commodi. Alias minima laborum enim esse! Exercitationem libero nisi sequi, eius placeat doloribus voluptas quod.
  </div>
</div>

Espero te sirva.

-1

Mira no se si te sirve puedes probar.

#contenedor{
   overflow:hidden;
}

#1{
   float: left;
}

#2{
   float:left;
}
<div id="contenedor">
<div id="1">
    div 1
</div>

<div id="2">
    div 2
</div>
</div>

2
  • en realidad lo que requiere es aplicarle un display flex, para que ambos div queden alineados de manera horizontal
    – jGomez
    Commented el 2 ago. 2021 a las 17:05
  • 1
    Al respecto de los id elegidos, recomendaría leer este recurso: developer.mozilla.org/es/docs/Web/HTML/Global_attributes/id
    – user128299
    Commented el 2 ago. 2021 a las 17:07

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