Placing a Div inside a Div

Question

I have a parent div id=A which has a width of 100%. I want that all the elements of the div A should be placed to the right.

So I added another div id=B inside A and did a text-align=right on the div A. The width of B is 600px.

However the controls appear left aligned in A. Any suggestions?

Answer 1

Just specify the width you want and make the margin-right: 0 and margin-left: auto

<div id="a">
<div id="b" style="width:600px; margin-right: 0; margin-left: auto;">
    If ID:A has a width of say 1000 then ID:B will have a left margin of 400px
</div>
</div>

or if ID:A is already inside a div anyway, you just need this:

<div id="a" style="width:600px; margin-right: 0; margin-left: auto;">
        If ID:A's wrapper has a width of say 1000 then ID:A 
        will have a left margin of 400px
</div>

The total width of a block element inside a block element is always the width of the container anyway.

Answer 2

Do you want this:

<style type="text/css">
body {
 direction:rtl;
}
</style>
<h3>Welcome to the real-time HTML editor!</h3>
<p>Type HTML in the textarea above, and it will magically appear in the frame below.</p>

Answer 3

Works for me... ;)

<div id="a" style="width:100%; text-align:right; border: 1px solid blue">
    <div id="b" style="width:600px; border:1px solid red">
        hi
    </div>
</div>

Answer 4

Just go :

#A * {
  text-align: right;
}

If you want the actual div to be right align and not just the text, use float:right instead.

#A *{
 float:right;
}

You might need to specify a width for #B. If you don't want to do that here's a solution:

#B{display:inline-block;}

Answer 5

You should do a float: right on the div B