Check out our Angular Book Series.

How do I right align a div inside a div?

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:


<div class="outerDiv">
<div class="innerDiv">
This is Text in the inner div<br/>
Some other Text
</div>
</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:


.outerDiv {
display: flex;
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:


.innerDiv{
background: #e6e6e6;
}

Play with the code here.

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

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.