How can i make two spans be in the same line with 'display:block' on

Question

I've got the following column header and i want it to be displayed like the following

 Known allergies Peanut Ace... 

ie the line shortned with ellipses.

My code works but it puts one span underneathe the other when i add display:block to the style.

it now displays like this

  Known allergies 

Peanut Ace...

How can I display it in the same line

<th border="0" >
    <span width="100%" onclick="dropdownResize()" style="padding-top:2px; white-space: nowrap; font-weight:normal;">&nbsp;
        <i>Known allergies </i>&nbsp;</span>
    <span id="allergiesSpan" style="white-space: nowrap; display: block ; overflow: hidden; 
    text-overflow: ellipsis; width:50%;"> 
    <b>Peanut, Aceti test test test tes test</b>&nbsp;</i></span>       
</th>

Answer 1

You could float: left; the part which has display: block;

<th border="0" >
    <span width="100%" onclick="dropdownResize()" style="padding-top:2px; white-space: nowrap; font-weight:normal;">&nbsp;
        <i>Known allergies </i>&nbsp;</span>
    <span id="allergiesSpan" style="white-space: nowrap; display: block ; float: left; overflow: hidden; 
    text-overflow: ellipsis; width:50%;"> 
    <b>Peanut, Aceti test test test tes test</b>&nbsp;</i></span>       
</th>

Answer 2

use display:inline-block; instead of display:block

Al

Answer 3

display: block; causes the element to be as wide as its' parent. You'll have to assign a width to both elements if they both are block and need to be next to eachother.

I see also that your example code gives the first span a width of 100% . This may contribute to the problem of the second element being pushed down.

Answer 4

Why not just have both span elements be in a block div, with style "overflow: hidden; text-overflow: ellipsis;". That way, the overflow will still be hidden, but your elements will be layed out next to each other?

Answer 5

I haven´t seen the rest of the html, but as you are using a table, why don´t you just put the two different blocks of information in two different table cells?

If the ellipses on the th itself is not working, you can always add a block level element in the table cell.