force all text within a div to remain on 1 line

I've got the following...

   <div id="nav-above" class="navigation"> 
 <div class="nav-previous"><a href="link" rel="prev"><span class="meta-nav">开发者_如何转开发;&laquo;</span> title</a></div> 
 <div class="nav-next"><a href="link" rel="next">title <span class="meta-nav">&raquo;</span></a></div> 
</div><!– #nav-above –> 

using external CSS alone is it possible to force all of that to remain on just one line?

Try this: http://jsfiddle.net/dT49F/

HTML:

<div class="container">
    <div id="nav-above" class="navigation"> 
        <div class="nav-previous">
            <a href="link" rel="prev">
                <span class="meta-nav">&laquo;</span>
                much much longer link title here and here and here
            </a>
        </div> 
        <div class="nav-next">
            <a href="link" rel="next">
                much much longer link title here and here and here 
                <span class="meta-nav">&raquo;</span>
            </a>
        </div> 
    </div>
</div>

CSS:

.container div {
    display: inline;
    white-space: nowrap;
}

Any reason for the inner DIVs? I'd just drop them - and if you need the classes, assign them directly to the links:

<div id="nav-above" class="navigation"> 
<a href="link" rel="prev" class="nav-previous"><span class="meta-nav">&laquo;</span> title</a>
<a href="link" rel="next" class="nav-next">title <span class="meta-nav">&raquo;</span></a>
</div><!– #nav-above –> 

div[class^=nav-] {
    float: left;
}

That should work. Please note my snippet is using CSS3 selectors, so it might not work in less-advanced browsers. Provide the same class to both divs, and then you can use normal selectors.

UPDATE:

This won't work in IE6, unless you do something like this:

<div id="nav-above" class="navigation"> 
 <div class="nav-previous navigation-links"><a href="link" rel="prev"><span class="meta-nav">&laquo;</span> title</a></div> 
 <div class="nav-next navigation-links"><a href="link" rel="next">title <span class="meta-nav">&raquo;</span></a></div> 
</div><!– #nav-above –>

(Notice the new class .navigation-links)

And then just change the css selector:

div.navigation-links {
    float: left;
}