CODEWITHSUNDEEP
htmlcss
Magnanimity
Magnanimity

Reputation: 1313

Cannot get two SPAN elements in same line, no matter what

I have a table header where I have somewriting in the middle, and a previous and next button that I would like floated left and right. I have placed these in span elements. The Previous button floated left works fine, but the Next button floated right keeps going into the next row and I cannot get this fixed no matter what. I have tried style="display:inline;" on both spans, I have tried style="white-space: nowrap;" on the TH element, but no luck.

Here is my PHP output for the header row (it's all in one row, broken into multiple rows below for readability):

<tr>
    <th colspan="4">
         <span style="float:left;">$sPreviousTicket</span>
         $sTicketTask# $aProcess[id] - $aProcess[subject]
         <span style="float:right;">$sNextTicket</span>
    </th>
</tr>

Here is the resulting HTML on my page:

<tr>
    <th colspan="4">
        <span style="float:left;">
            <input type="button" onclick="window.location = 'view_request.php?process_id=207';" value="Previous">
        </span>
        Ticket# 209 - 3G
        <span style="float:right;">
            <input type="button" onclick="window.location = 'view_request.php?process_id=212';" value="Next">
        </span>
    </th>
</tr>

Here is a screenshot of the output:

enter image description here

Upvotes: 1

Views: 9310

Answers (2)

Parixit
Parixit

Reputation: 3855

Please try following:

span { display:inline-block; }

Final HTML

<tr>
    <th colspan="4">
        <span style="display:inline-block;">
            <input type="button" value="Previous">
        </span>
        Ticket# 209 - 3G
        <span style="display:inline-block;">
            <input type="button" value="Next">
        </span>
    </th>
</tr>

Upvotes: 1

Dan Goodspeed
Dan Goodspeed

Reputation: 3560

It's the "Ticket# 209 - 3G" line that's pushing it down. Make that line last, like:

 <span style="float:left;">button...</span>
 <span style="float:right;">button...</span>
 Ticket# 209 - 3G

Upvotes: 3

Related Questions