How to keep Input and Image elements on same line.

Question

I have a table with many columns. One of the columns contains a cell that has 'input' and 'img' elements in it. When the table has plenty of room the 'input' and 'img' elements appear on the same line. When the table gets squished it the two elements end up on different lines. I would like to ensure that these two elements never end up on two lines.

Here is my HTML:

<td>
    <input type="text" /><a href="#"><img src="..." /></a>
</td>

I have tried using "float:left" and "float:right" on the 'img' element. Doing so didn't change the fact that the 'img' element was on the line below. It only changed whether the element was on the left or right side of the second line. Maybe I'm missing something?

Answer 1

Try putting a nowrap in the td. Not sure if this is supported on older/exotic browsers.

<td nowrap>

Answer 2

You can use the white-space CSS property for this:

td { white-space: nowrap; }

My suggestion however is to be more forceful about column widths. Give this column a high enough width such that the browser doesn't "collapse" it when it's figuring out the table layout.