CODEWITHSUNDEEP
csshtml
dotnetN00b
dotnetN00b

Reputation: 5131

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

here's 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 this, everything is aligned to the left. If I use float:right, then PTable and Notify are side by side. As opposed to PTable being below Notify.

What I would like is: Notify on top and all the text in its inner div aligned on the left border of the inner div. PTable under Notify aligned how the browser sees fit.

Upvotes: 7

Views: 71440

Answers (4)

Ashish Bardiya
Ashish Bardiya

Reputation: 49

You can move div upper side of div for ex:-

$("#parent").prepend($("#outer"));

Upvotes: 0

dotnetN00b
dotnetN00b

Reputation: 5131

This 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>

Upvotes: 2

JSW189
JSW189

Reputation: 6325

You want to use both float: right and then text-align: left on div#Notify to achieve this effect. Further, to make sure PTable does not show up beside Notify, use clear: both.

#Notify, #PTable {
    clear: both;
}

#Notify {
    float: right;
    text-align: left;
}

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

Upvotes: 11

Khallil Mangalji
Khallil Mangalji

Reputation: 481

You need to specify a fixed width for the Notify div, this will ensure that PTable is not beside it.

Upvotes: 0

Related Questions