How to stop a div wrapping under another?

On the breadcrumb on this page:

http://www.hot-dinners.com/The-City/whitechapel-gallery-dining-room

"room" wraps underneath the "you are on" section. I don't mind it wrapping, but I would rather "room" aligned underneath "home" (i.e. so nothing wraps under "You are currently on".

The HTML is:

<div id="breadCrumb">
<div id="current">You are currently on:&nbsp;</div>
<div><jdoc:include type="modules" name="breadcrumb" /></div>
</div>

The only CSS I'm using is:

#current {
position: relative;
float:left;}

Any ideas on what I need to do would be really helpful!

How about
#breadCrumb {/*main.css (line 114)*/
color:#707070;
float:left;
font-size:11px;
width:auto;
}

And you may add white-space:nowrap; to avoid the wrap in any case.

Alas, the nowrap command could cause issues for longer names, and the width=auto means the entire restaurant name wraps underneath the "You are currently on" section. Thanks anyway, though.

I know I could resolve this with a table, but I'm guessing that should be my last resort?

Then give some breathing space, more than 50%. like
#breadCrumb {/*main.css (line 114)*/
color:#707070;
float:left;
font-size:11px;
width:65%;
}
#mod_search_searchword {/*main.css (line 266)*/
width:130px;
}