How can I prevent floated div elements from wrapping when the browser is re-sized?

Question

How do you make DIV\'s that are floated left next to each other not wrap when the browser is re-sized such that the viewport becomes smaller?

div {
  float:          


        

Answer 1

I realize that it's fashionable to hate on tables, but they can be useful.
http://jsfiddle.net/td6Uw/
Instead of floating the divs, place them in a table and wrap the table with a size-constrained div. The TR will prevent wrapping.
Also, I used DIVs inside the TDs to make cell styling easier. You could style the TDs if you spend the time, but I find them hard to style and usually wimp out and just use the DIV-in-TD method employed by my fiddle.