1

Estoy editando una plantilla de WordPress y lo que me falta es poner dos div, uno al lado del otro, así ("2" y "3"):

introducir la descripción de la imagen aquí

Ya traté con float:left; en el div "2" y overflow:hidden; en el div "3" y el resultado se acerca a lo que busco. Pero necesito que ambos se queden pegados abajo dentro del div "1" como se ve en la imagen, y el problema al aplicar esas propiedades CSS es que el div "2" se queda pegado arriba a la altura del div "3".

7
  • 2
    Alex, te sugiero agregar el código que hayas y, por favor lee Cómo preguntar para que tu pregunta sea mejor recibida.
    – Jorgesys
    el 27 ago. 2017 a las 20:56
  • Hola. Creo que no es necesario poner el código porque lo descrito en mi pregunta es todo, no hay más.
    – Alex
    el 27 ago. 2017 a las 21:34
  • Alex, para facilitar mejores respuestas, es bueno que sigas las sugerencias de los administradores de añadir el código de los intentos que hayas hecho.
    – PA.
    el 27 ago. 2017 a las 21:50
  • Yo, realmente, no entiendo por qué me piden más código... El que menciono en mi post es todo (son solo tres div, "1" con "width:600px" y "2" con "width:90px;") , además al final advierto que intenté aplicando dos propiedades CSS a los div "2" y "3" y que eso dio un resultado que no es el que busco.
    – Alex
    el 27 ago. 2017 a las 22:39
  • @Alex aunque te parezca irrelevante el código ayuda mucho. Evita que quien responda tenga que crearlo de cero, se pueden ver otros errores o problemas que tú no hayas detectado, en el caso de HTML y CSS Stack overflow tiene además un snnipet que permite ejecutarlo. El código muchas veces se explica por si mismo y eso ayuda a encontrar una respuesta o a entender mejor el problema.
    – user7176
    el 28 ago. 2017 a las 9:29

3 respuestas 3

3

Espero que te sirva cualquier duda no dudes en consultarme.

.box01{
  width: 600px;
  height: 300px;
  border: 5px solid red;
  background: white;
  color: black;
  display: flex;
  align-items: flex-end;
}

.box02{
  width: 90px;
  height: 50px;
  background: blue;
}

.box03{
  width: 100%;
  height: 180px;
  background: green;
}
<div class="box01">
  <div class="box02"></div>
  <div class="box03"></div>
</div>

3
  • Esto es lo que buscaba, muchas gracias!!!
    – Alex
    el 28 ago. 2017 a las 7:33
  • Quedó perfecto, mejor imposible :)
    – Alex
    el 28 ago. 2017 a las 7:38
  • de nada, estamos para ayudarnos entre todos, procura nunca usar selectores tipo id dentro de css eso es una mala practica, buena suerte con tu proyecto. el 28 ago. 2017 a las 7:41
0

si solo lo que buscas es hacer que dos div se pongan en la parte de abajo de un div haz lo siguinte:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div style="background: black; width:600px; height: 100px;">
	<div style="background: red; width:90px; height: 50px; display: inline-block; margin-top: 50px;"></div>
	<div style="background: blue; width:90px; height: 50px; display:inline-block; margin-top: 50px; "></div>
</div>
</body>
</html>

creo que el codigo no necesita mucha explicacion ya que es algo facil.

Si quieres que ellos se adapten te sugiero que uses porcentajes en lugar de pixeles.

0

Complementa el float con position:relative;

Te dejo un ejemplo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
        <style>
            #div1{
                background-color: black;
                width: 40%;
                color: white;
            }
            #div2{
                background-color: red;
                width: 40%;
                float: left;
                position: relative;     
            }
            #div3{
                background-color: green;
                width: 40%;
                float: right;
                position: relative;

            }

            </style>
        </head>

        <body>
        <div id="div1">Este es el div 1</div>
        <div id="div2">Este es el div 2</div>
        <div id="div3">Este es el div 3</div>
    </body>
</html>
0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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