3

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.

ant
  • 22,634
  • 36
  • 132
  • 182

2 Answers2

11

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

Tatu Ulmanen
  • 123,288
  • 34
  • 187
  • 185
  • Be careful, the `nowrap` would cause an overflow/scrollbar if the content is longer than the parent element and/or the screen. – BalusC Dec 11 '09 at 13:28
10

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

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • You've made another changes or have left away other information. It works perfectly here when I copypaste your CSS/HTML into a blank template and remove the two unnecessary floats (I didn't add the nowrap though as it makes little sense as well). – BalusC Dec 11 '09 at 13:51
  • it works perfectly for me as well when I paste to a blank page, maybe some general css is interfering, can I overwrite something – ant Dec 11 '09 at 13:56
  • The thing is it 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, can I somehow style it – ant Dec 11 '09 at 14:02
  • 1
    @c0mrade: "maybe some general css is interfering"? How can that be a "maybe"? Aren't you using Firebug to also check what CSS is being applied to that span? Presumably, it's floated by some other CSS, so you have to reset it for this specific instance by setting `float: none`. – mercator Dec 11 '09 at 14:14
  • Hi mercator, yeh the float:none helped .. it was inheriting something from other style sheet also called the same, I just deleted the float:left; thought that was going to solve my problem but it didn't , tnx .. which answer will I accept now ? – ant Dec 11 '09 at 14:18
  • Alright, I did accept it works .. but for some reason in IE7 border bottom and top is not rendering.. – ant Dec 11 '09 at 14:32
  • That's likely a different problem. Start ensuring that you're using strict/standard doctype (and thus not the one which causes IE to render in quirks mode). More info: http://hsivonen.iki.fi/doctype/ – BalusC Dec 11 '09 at 14:35
  • 1
    Solved it div.content { float:none; } Thank you guys for your answers I was really stuck .. – ant Dec 11 '09 at 14:41