I was working with a client to create a specific layout on the page and I wanted to align a div inside another div. But, I couldn't use text-align because I didn't want to right align the text elements in the inner div. How do you do it?

First, create the outer div and inner div:

view plain print about
1<div class="outerDiv">
2 <div class="innerDiv">
3 This is Text in the inner div<br/>
4 Some other Text
5 </div>
6 </div>

A simple div is inside another div, and the inner div has some text. The outer div's only purpose is a wrapper for positioning purposes. Both the outerDiv and innerDiv have CSS Styles attached.

This is the CSS for the outerDiv:

view plain print about
1.outerDiv {
2 display: flex;
3 float : right;

It enables the outerDiv to use flexbox styling and floats the content to the right. Flexbox is an advanced way to position CSS elements.

The innerDiv doesn't need any special CSS styling to make this work, but let's give it a background color:

view plain print about
2 background: #e6e6e6;

Play with the code here.

The implementation is really simple once you figure it out; but sometimes getting there is a stumble.