Question

simplified, i have three elements A, B and C. B and C are together in a div. if there is enough horizontal space (browser window wide enough) i want them displayed as

A B C

trivial so far. if the window gets smaller, i want them to wrap like this:

A
B C

i solved this by giving the div a style.whiteSpace = "nowrap".
the problem is, that B C now simply wont wrap any more, even if there is not enough space to display them. when the window gets even smaller, i want this to be displayed as

A
B
C

so what i am looking for is kind of a softer version of ‘nowrap’ which prevents wrapping if there is room to evade to, but allows wrapping if not.

EDIT:

a reply solved the above by making everything float: http://jsfiddle.net/nF4k5/6/

this made me realize that my simplification went too far. actually in my application A is a text and has wrapping in itself, so will sometimes fill the whole width. B and C can be imagined as single words that should appear
a) together in the last line of text A or if they wont fit there together
b) on a new line or if that line is too short
c) on two lines.

i made an example to play around with: http://jsfiddle.net/nF4k5/5/

ever smaller screens should result in:

A A A A B C

A A A A
B C

A A A
A B C

A A
A A
B C

A
A
A
A
B
C

it would be especially nice if the solution didnt involve making changes to A, like my adding of nowrap to the div around B C, which doesnt work.

EDIT:
solution: instead of giving the wrapper of B and C a whiteSpace=”nowrap” i give it a display=”inline-block”.

Answer 1

put A in div X , B and C in Y. Float X and Y to left.
Whenever width is smaller than width of X+Y, Y will go down.

Inside Y : put B in div sonOfX, put C in sonOfY, Float sonOfX and sonOfY to left.
Whenever width is smaller than width of sonOfX+sonOfY , sonOfY will go down.

here you go – http://jsfiddle.net/nF4k5/

This should do it: http://jsfiddle.net/nF4k5/7/ for your new question