force all text within a div to remain on 1 line - html

Question

I've got the following...
<div id="nav-above" class="navigation">
<div class="nav-previous"><span class="meta-nav">«</span> title</div>
<div class="nav-next">title <span class="meta-nav">»</span></div>
</div><!– #nav-above –>
using external CSS alone is it possible to force all of that to remain on just one line?

Answer 1

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">«</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">»</span>
</a>
</div>
</div>
</div>
CSS:
.container div {
display: inline;
white-space: nowrap;
}

Answer 2

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">
<span class="meta-nav">«</span> title
title <span class="meta-nav">»</span>
</div><!– #nav-above –>

Answer 3

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"><span class="meta-nav">«</span> title</div>
<div class="nav-next navigation-links">title <span class="meta-nav">»</span></div>
</div><!– #nav-above –>
(Notice the new class .navigation-links)
And then just change the css selector:
div.navigation-links {
float: left;
}