How to position the div at the bottom of container?
This was a question I was asked at a recent interview.
You can see we need to position the two squares inside a container. One on the top left corner and one on the bottom right corner.
You can break down the above image into three div
. A container div and two square div
. Let’s first write the HTML first.
<div class="container">
<div class="square square-color--red">
</div>
<div class="square squaree-color-blue">
</div>
</div>
For this to work, you need to position the two squares absolute to the container div.
Let’s write the CSS classes.
.container {
height: 200px;
width: 200px;
position: relative;
border: 1px solid gray;
}
.square{
width: 40px;
height: 40px;
position: absolute;
}
.square-color--red {
background-color: red;
left: 10px;
top: 10px;
}
.square-color-blue {
background-color: blue;
right: 10px;
bottom: 10px;
}