CSS Formatting to Keep Together

The white-space:nowrap style does prevent the "foo" divs from breaking, but I also found it caused them to blow out of the width defined in the "content" div.

I found the following worked in IE, Firefox, and Chrome (pc only, don't have access to a Mac just now)

div.foo
{
    display:inline-block;
}

This is an example where tables are 'allowed' to be used. Because this is tabular data. Somewhat.

Doing everything in div is fine for layouts, but you're actually listing things with rows and columns. That's a table in my book.

To keep everything together, add this:

div.foo
{
  white-space:nowrap;
}