Odd float/menu combination

[rawling]

Hi guys,
I'm trying to get some very specific float behaviour and I'm not sure if it can be done or not, or if it's blatantly obvious.
Basically, at the top of the page I want a small image (logo) floated to the right, and a horizontal menu (although for these purposes, just, say, some text) on the left. The menu/text is short enough that, in a normal browser window, it has no need to wrap. However, I'm a stickler, so what I want to happen if the window is narrowed is this: first the text jumps down a line (because it doesn't fit next to the image); then when (and only when) the browser window itself gets too narrow for the text, the text starts wrapping.
I've tried just floating the image to the right, and the text wraps as soon as it gets too wide for [broswer window width - image width]. I've tried fixing the text width, but then it doesn't wrap at all. It's like I'm looking for a "soft" break condition (when the image is trying to squash the text) and a "hard" break condition (when it's the window itself doing the squashing) and I'm not sure such a thing exists.

Unless it's something obvious!

So yeah, thanks if anyone can help me, and sorry if this is a dumb question!

[hschmitz]

I might be wrong, but I don't think it can't be done with CSS alone. The problem is that you would need to specify the width of the menu/text element depending on where it is displayed.

I can think of a way to do this with JavaScript, but that is probably not what you want.

[rawling]

Yeah, thanks for the offer, but I'm trying to keep things simple. Trying to replicate a site done in *cough* tables, and one thing I noted was how horrible this navbar looked if the page wasn't wide enough. I'll keep trying tomorrow, but any moe replies are welcome!

[fuzzee]

a link or at least a screenshot would probably help!