Paul_o_b - 10:00 am on Aug 19, 2011 (gmt 0)

You can do it quite simply by removing the float and using display:inline block instead.

This will allow the white-space:nowrap to work and the row will not wrap. No need for any extra divs at all.:)


#header {
margin: auto;
width: 95%;
text-align: left;
height: 124px;
white-space: nowrap;
overflow-x: auto;
}
.headerImageRepeat {
width: 210px;
height: 83px;
margin-right: 10px;
background:red url('../images/userBg.png') no-repeat;
display: inline-block;
}
* html .headerImageRepeat{display:inline}/* ie6 inline -block fix*/
*+html .headerImageRepeat{display:inline}/* ie7 inline -block fix*/




I would probably have used a list structure instead of multiple divs and then targeted the list element without the need for all those same classes on every element.