Question

I have a following divs defined in source:

<div id="container">
    <div id="right">Right</div>
    <div id="left">Left</div>
</div>​

I cannot really reorder them, so I have to play with CSS so that they appear on the page as follows:

+---------------------+
| container           |
| +-------+-------+   |
| | left  | right |   |
| +-------+-------+   |
+---------------------+

The challenge is that contents of #left div may be of arbitrary width and whatever the width is, I need the #right div to stick to the right border of #left div. Any ideas how to achieve that?

Any help appreciated!

Also, there is a small constraint: I need both of #left and #right align to the left of border of the #container div.

Answer 1

You can use float: right to move div#right and div#left to the correct sides. That should also align the right side of div#left to div#right.

#right, #left {
    float: right;
}

JS Fiddle Example