Question

Considering the following :
http://jsfiddle.net/Johnny5/EC8kK/

I would like the input button to align right with the inner div, without wrapping with another element. Example :

|---div.container-------------------|
|                                   |
| |--div.box---------------|        |
| |                        |        |
| |------------------------|        |
|                                   |
|                |--input--|        |
|                |---------|        |
|                                   |
|-----------------------------------|

The width of .box is known, but not the width of the input. So I can’t calculate exactly the margin-left for that input. I don’t want to add a container <div> around .box and input. Don’t really care for IE <= 7.

The ideal solution will modify only the css, without adding html markups.

Any suggestions?

Answer 1

Here is the fiddle

http://jsfiddle.net/RcNSN/

And here is a code without modifying HTML. adjust the right margin, once you remove the borders.

http://jsfiddle.net/RcNSN/2/