I have a set of divs nested within each other but I'm struggling to align the text and it's container to the bottom of it's parent div.
Here's the code:
<div id="frontpage-Button-Cont">
<div id="Align-content">
<div class="button-cont">
<div class="thumbnail"><div class="title">PS</div></div>
<div class="paragraph">
<div class="pheader">HEADER</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<div class="button-cont">
<div class="thumbnail red">PS</div>
<div class="paragraph">
<div class="pheader">HEADER</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<div class="button-cont">
<div class="thumbnail orange">PS</div>
<div class="paragraph">
<div class="pheader">HEADER</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<div class="button-cont">
<div class="thumbnail green">PS</div>
<div class="paragraph">
<div class="pheader">HEADER</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</div>
</div>
.button-cont {
width: 175px;
/*background: blue;*/
float: left;
padding-left: 35px;
margin-top: 10px;
height: 250px;
}
.thumbnail {
color: #fff;
font-size: 12px;
background: #1f4e9b;
width: 175px;
height: 135px;
text-align: center;
}
.pheader {
color: #DC143C;
min-width: 175px;
text-align: center;
}
.paragraph {
text-align: center;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
Example:
I basically would like the PS aligned to the bottom of the div.
Thanks
You need:
.thumbnail {
position:relative;
}
.title {
position:absolute;
bottom: 0;
}
Since your .thumbnail
has a fixed height, I myself would go with absolute positioning on the .title
.
.title {
position:absolute;
bottom:0;
width:100%;
}
I noticed only the first group has the .title
div, I don't know if you forgot them or if this was by design.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.