To get the .block divs to show side by side you need to add a width to the float: left; but then the white-space: nowrap makes the text extend outside the divs, so delete that:-
Code:
<style type="text/css">
.wrap
{
background-color:Red;
width:100%;
overflow:auto;
/*white-space:nowrap;*/
}
.block
{
background-color:blue;
margin:10px;
width: 200px;/*auto;*/
float:left;
}
</style>
Your .wrap div has width: 100%; so the three divs show side by side in a wide window but when the window resolution width is too small and then one or two divs will go to a lower line.
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.