I am editing a WordPress template and what I need is to put two div , next to each other , as well ("2" and "3"):
I've already dealt with float:left; in div "2" and overflow:hidden; in div "3" and the result is close to what I'm looking for. But I need both of them to be stuck down inside the div "1" as seen in the image, and the problem when applying those CSS properties is that the div "2" stays stuck up at the height of the div "3 ".
I hope you have any questions, do not hesitate to contact me.
.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>If only what you are looking for is to have two div put on the bottom of a div do the following:
<!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>I think the code does not need much explanation because it's easy.
If you want them to adapt, I suggest you use percentages instead of pixels.
Complement the float with position: relative;
I'll give you an example:
<!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>