Aligning text to bottom left corner inside a styled-element
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
Answer
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;