Forcing Block Elements To Not Wrap In IE (no Fixed Width Parent)

This is quite a highly discussed issue on the web, but after hours of research and trial and error, I am still unable to get the below HTML to behave as desired in IE 7, 8 or 9: &l

Solution 1:

http://jsfiddle.net/hjCWN/

I haven't tried it in IE, but you could try removing white-space: nowrap; and replace it to margin-right: -99999px;

Solution 2:

Put the boxes in a table. That seems to be the only practical approach.

When you try to make the .box elements appear in a row, the use of float: left has its own effect, which cannot be prevented by setting white-space, as it operates at a different level, so to say. But by putting them into a table row, you force them into a row.

You can even dispense with those elements and just style cells of a table:

<style>
table.boxes td {
  border: 1px solid black;
  width: 20px;
  height: 20px;
  padding: 0;
}
</style>
...
<table class=boxes cellspacing=0><tr><td>...</td><td>...</td>...<td>...</td></tr></table>