Aligning text to bottom left corner inside a styled-element

Question

How do I make the text that is INSIDE this styled element align to the bottom left corner? I only want the text inside the box to be in the bottom left corner of the box. The rest of the text should be unaffected.

I am new to CSS and cannot figure it out.

HTML

<body>
    <h1>example text</h1>
    <article class="box" style="background-color: #2672EC">foo bar</article>
    <h1>example text</h1>
</body>

CSS

body {
    font-family: Verdana;
    font-size: 16px;
    color: black;
}

.box {
    height: 187px;
    width: 187px;
    margin-right: 5.5px;
    margin-left: 5.5px;
    margin-bottom: 5.5px;
    margin-top: 5.5px;
    color: white;

}

Here is the JSFiddle

http://jsfiddle.net/J9hT5/8/

Mr. Alien · Accepted Answer · 2014-02-10T09:59:05.397

You can do it two ways, either by using CSS Positioning Technique where you need to set the parent element to position: relative; and the child element to position: absolute;

Demo (Wrapping the text using a span element)

.box > span {
    position: absolute;
    bottom: 0;
    left: 0;
}

Or by using display: table-cell; with vertical-align: bottom;

Demo (No change in the markup)

.box {
    height: 187px;
    width: 187px;
    margin-right: 5.5px;
    margin-left: 5.5px;
    margin-bottom: 5.5px;
    margin-top: 5.5px;
    color: white;
    display: table-cell;
    vertical-align: bottom;
}

Also, would like to refactor your CSS a bit, the below snippet

margin-right: 5.5px;
margin-left: 5.5px;
margin-bottom: 5.5px;
margin-top: 5.5px;

Can be wrote as margin: 5.5px 5.5px 5.5px 5.5px;

Note that second option doesn't work if parent have display set to flex, unfortunately — zakius, Jan 26 '16 at 11:14

score 3 · Answer 2 · answered Feb 10 '14 at 07:32

Try to wrap your targeted text inside a span:

<article class="box" style="background-color: #2672EC"><span class="bottom">foo bar</span>

Then you can use:

.box {
    position: relative;
}
.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
}

Updated Fiddle

Aligning text to bottom left corner inside a styled-element

2 Answers2