Align contents of DIV always on one line

Question

I have the following :

HTML

<th class="sort">
<div>
    <div class="sort"></div><a href="#">Last Name</a>

</div>
</th>

css:

table.tablesorter thead th.sort
{
    padding:0;
}

table.tablesorter thead th div.sort 
{
    margin:0;
    width:15px;
    height:30px;
    float:left;
    background: url("/Content/images/admin/sort.png") no-repeat;
    background-position: 0px center;
    cursor:pointer;
}

table.tablesorter thead tr th.sort a 
{
    cursor:pointer;
 color:inherit;
    vertical-align:middle;
    float: left; 
    padding-top: 7px;
}

I want to display inner and inside vertically aligned middle and always on ONE line so that when a browser window is resized (small) it will not break and will not more underneath inner (which is what is happening now). thanks

Answer 1

use the "display inline" command...

<div style="display:inline;float left;"><a href="#">First name</a></div>
<div style="display:inline;float right;"><a href="#">Last name</a></div>

Answer 2

Its not clear to me what "inner" and "inside" youre referring to (you mught want to update and elaborate a bit, as well as post the complete markup for the table) but it sounds like you basically want everything in the th to be in one continuous line regardless of avialable space. You can turn off the text from wrapping with whitespace: nowrap;. However your content is going to overflow the th because thats how table cells work, so you need to set overflow: hidden on something that wraps the text. Unless yo need more than one elemment inside the cells you dont need the float.

The markup might look like this:

<thead>
  <th><div class="clip sort"><a href="#">First Name</a></th>
  <th><div class="clip sort"><a href="#">Last Name</a></th>
</thead>

Whith the css like so:

.clip {width: 100%; overflow: hidden; whitespace: nowrap;}
th {vertical-align: middle; height: 30px;}