CODEWITHSUNDEEP
htmlcss
ple103
ple103

Reputation: 2110

Aligning an element to the bottom of a container

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.

enter image description here

HTML

<article class="box" style="height: 144px">
    <header class="entry-header" style="padding-top: 15%;">
        <?php the_title(); ?>
    </header>

    <footer class="entry-meta" style="font-size: 12px;">
        <?php echo get_the_date(); ?>
    </footer>
</article>

CSS

.box {
    background-color: #333333;      
    color: white;       
}

.box header {
    text-align: center;
    word-wrap: break-word;
    margin: 0 10px 0 10px;
}

.box footer {
    text-align: center;
}

Since titles can vary in length, I am having trouble aligning the date to the bottom of the box.

Expected result

enter image description here

I have tried setting margin-top to the footer, but this doesn't correctly align the dates because they are all displayed on a different line. Is there another way I can go around doing this?

Upvotes: 0

Views: 62

Answers (3)

Olaf Dietsche
Olaf Dietsche

Reputation: 74018

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

Upvotes: 1

Danield
Danield

Reputation: 125443

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;
}

Upvotes: 2

jmore009
jmore009

Reputation: 12923

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

<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%;
}

Upvotes: 1

Related Questions