white-space:nowrap causes contents to go outside cell

I have a td where I declare white-space:nowrap;. This prevents linebreaks in the text, but the cell size does account for the missing linebreaks and the text goes outside the td. Is there anyway to make the cell size account for white-space:nowrap;?

My code looks like this:

<tr><td style="background-color: #0C264C;color: #FFFFFF; padding: 2px; margin: 2px; white-space: nowrap;" &开发者_开发百科gt; 

<div style="float:left; text-align:left; width:50%;">Quarter</div> 

<div style="float:right; text-align:right; width:50%;">Thousands of Employees</div>

</td></tr>

The tr does not extend automatically, and some of the Thousands of Employees text streches outside the table. I do not declare widths anywhere for the table.

Update

Without seeing your whole table, its hard to judge, but the combination of nowrap, floated elements, and block elements will be difficult to make it work. Those elements all have a different effect on element positioning, and pushing the bounds of the parent.

Since you are already using a table, you should use its built in cell mechanism which should properly adjust the width of the table accordingly (inline styles omitted for brevity).:

<table>
   <tr>
   <th>Quarter</th>
   <th class="right">Thousands of Employees</th>
   </tr>
   ....
</table>

And then put this in your css:

tr th { width: 50%; white-space: nowrap }
th.right { text-align: right }

Original Answer

If you have a fixed width on the table, and the content cannot fit within the td and not push with width of the table larger, then the contents will go outside the cell.

Try removing the width (width:auto) or using this in your css:

#idOfYourTable {    
    min-width: 800px; /* or whatever width you originally had set */
}

And then using width: 800px in an IE6 only stylesheet since IE6's width acts like min-width anyway. You might have to play around with some other rules as well to get IE6 to play nice.

EDIT: misunderstood your question at first.

I think you won't be able to achieve what you're looking to do without giving your containers some fixed dimensions. A hack might be to include some additional disguised element on the same line as your text, like a spacer or a white dot, forcing the container to take it into account, but that's a really nasty hack.

Space between html elements is supposed to be ignored. So what you have is a continuous block of nowrap code.

A way to get around this is to use the unicode character for Zero Width Space. This will break apart your code without introducing additional space.

<div style="float:left; text-align:left; width:50%;">Quarter</div>&#8203;
<div style="float:right; text-align:right; width:50%;">Thousands of Employees</div>

If for some reason you can't use the unicode code, you might want to try the html entity   which is a thin space. It will, however, introduce some additional space into your html output.