Question

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?

Answer 1

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;
}