CODEWITHSUNDEEP
cssalignment
Johnny5
Johnny5

Reputation: 6862

css alignment with previous sibling

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?

Upvotes: 2

Views: 3583

Answers (2)

ayyp
ayyp

Reputation: 6598

What about something like this: http://jsfiddle.net/bGE2J/? It should work as long as your container isn't fluid.

Upvotes: 3

avetarman
avetarman

Reputation: 1252

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/

Upvotes: 3

Related Questions