Aligning text to bottom left corner inside a styled-element

css, html, text-alignment

Solution

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

Problem

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/

Original source