How to move a div to the right side of the screen but align the text of the left border of the div?

Question

here is my code:

<div id="Notify" style="clear:both;"> <div style="text-align:right;"> <div style="text-align:left;"> Send Table to Standards By Email. (everything below is a placeholder) <br /><br /> Saved at: @DateTime.Now.ToString() <br /> Saved by: 107 <br /><br /> <input type="submit" value="Send Email" /> </div> </div> </div> <br /> <br /> <div id="PTable"> Products Table Placeholder </div> 

When I try to do this, everything is aligned to the left. If I use float: on the right, then PTable and Notify will be side by side. Unlike PTable, below is Notify.

I would like to: notify on top and all the text in its inner div, aligned on the left border of the inner div. PTable under Notify is aligned how the browser looks.

Answer 1

To achieve this effect, you want to use float: right and then text-align: left on the div#Notify . Also, to make sure that PTable is not displayed next to Notify, use clear: both .

 #Notify, #PTable { clear: both; } #Notify { float: right; text-align: left; } 

JS Fiddle: http://jsfiddle.net/SDDG2/2/

Answer 2

It seems to work!

 <div id="Notify" style="clear:both;"> <div style="float:right;"> <div style="text-align:left;"> Send Table to Standards By Email. (everything below is a placeholder) <br /><br /> Saved at: @DateTime.Now.ToString() <br /> Saved by: 107 <br /><br /> <input type="submit" value="Send Email" /> </div> </div> </div> <br /> <br /> <div id="PTable" style="clear:both;"> Products Table Placeholder </div> 

Answer 3

You need to specify a fixed width for the Notify div, this ensures that the PTable will not be next to it.

Answer 4

You can move the top side of a div div for example:

$ ("# parent") before the name ($ ("# external")) ;.