Stick a div to the right border of a div defined later

css, html

Solution

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

Problem

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.

Original source