Jason Jason - 2 months ago 8
CSS Question

Placing div at the bottom

I am trying to place

content-desc
div to the bottom of
content-box-inner
but it's not placing there, it's going just after the image:



.content-box-inner {
position: relative;
display: inline-block;
width: 360px;
height: 460px;
background-color: #fff;
margin-right: 10px;
border: 1px solid #ddd;
overflow: hidden;
}
.content-box-inner > img {
width: 200px;
margin-top: 10px;
border: 1px solid #ddd;
padding: 8px;
}
.content-title {
position: relative;
height: 35px;
background-color: #FFB400;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3)
}
.content-title > p {
text-align: center;
line-height: 35px;
font-family: verdana;
color: #222;
font-weight: bold;
letter-spacing: 0.02em;
text-transform: capitalize;
}
.content-desc {
position: relative;
height: 50px;
bottom: 0;
left: 0;
right: 0;
}
.content-desc > p {
font-family: verdana;
letter-spacing: 0.04em;
font-size: 15px;
padding: 8px;
}

<div class="content-box-inner">
<div class="content-title">
<p>text</p>
</div>
<img src="img.jpg">
<div class="content-desc">
<p>some text</p>
</div>
</div>





Does anyone know, what I did wrong in my CSS?

Answer

Have you tried using position: absolute;? adding position: absolute; bottom: 0; should fix your issues.

Comments