How to force elements to stay in the same row

Question

Hi I have a following css :

div.container {
 height:20px;
 overflow: hidden;
 margin: 15px 0px;
 padding:5px 10px 5px 10px;
 white-space: nowrap;  
}

div.content{
 width:100%;
 float:left;
 display:inline;
}

div.content a {
 float:left;
 padding: 2px 2px;
 border: 1px solid #cccccc;
 text-align:center;
}

div.content a:hover {
 background-color:#433FC1;
 color:#fff;
 text-decoration:none;
}

span.current_link {
 font-weight: bolder;
 float:left;
 padding: 2px 5px 2px 5px;
 margin: 1px 2px 0 2px;
 text-align:center;
}

Here is my HTML :

<div class="container"><div class="content"> Some text      <span class="current_link">Current link</span> 
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
<a href="#">Link4</a>
<a href="#">Link5</a>
</div>
</div>

Now I would like to get rendered in my page output like this
Some text Current link Link1 Link2 Link3 Link4 Link5 all in the same line that is, right now my output looks like this

Some text 
Current link Link1 Link2 Link3 Link4 Link5

How can I make them appear in the same line ? thank you

NEW UPDATES :

I removed float:left; from the a and span element and added white-space:nowrap; to content and now my output looks like this :

Some text Link1 Link2 Link3 Link4 Link5
Current link

We seem to be on the right track here, only Current link to get up in same line :) thank you

ANOTHER UPDATE :

Everything appears in the same line when I remove element from Current link with firebug, but this content is being generated by javascript and I cannot just remove the span tag because more pages use the same javascript.

Answer 1

Remove float:left from <span> and <a>. This makes no sense. Those are already inline elements.

Answer 2

Remove the floats and add div.content { white-space: nowrap; } and see if that solves your problem.