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

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.