Aligning An Element To The Bottom Of A Container

Question

I have boxes that each display the title and date of a blog post. Blog titles will take up a maximum of three lines of the box. HTML

Solution 1:

Set position:relative; on the box.

Set position:absolute; on the footer (date)

.box {

   position: relative;      
}

.box footer {
    position: absolute;
    bottom: 10px; /* however much you need */
}

Alternatively you could use css tables as well:

FIDDLE

CSS

.box
{
    display: table;
}
header
{
    display: table-row;
    height: 100%; /* fills remaining height */
}
footer
{
    display: table-row;
    height: 20px;
}

Solution 2:

if those boxes are going to always be a fixed consistent height you can wrap the content in a container and set a height on it and put the date underneath, example:

HTML

Baca Juga

<div class="box">
    <div class="container">
       <p>text goes here</p>
    </div>
    <p>24 December, 2013</p>
</div>

CSS

.box{
    height: 100px;
    width: 100px;
    background-color: grey;
}

.container{
    height: 90px;
    width: 100%;
}

Solution 3:

If you have browsers with flexbox support, you can use

.box {
    display: inline-flex;
    flex-direction: column;
}

and push the footer to the bottom with

.box footer {
    margin-top: auto;
}

See JSFiddle

Html5 Cafe

Aligning An Element To The Bottom Of A Container

Solution 1:

CSS

Solution 2:

Solution 3:

Post a Comment for "Aligning An Element To The Bottom Of A Container"