1/* Set the margin to 0 so we'll know that the target will be there if the content isn't flowing into a region */ 2body { 3 margin: 0; 4} 5#msg-complete { 6 color: blue; 7} 8/* Set the width of the content div so that the blocks will wrap downward when they're not flowing into a region */ 9#content { 10 flow-into: content; 11 width: 75px; 12} 13/* Set regions to float left so the blocks will be laid out horizontally when they're flowing into the regions */ 14.region { 15 flow-from: content; 16 width: 75px; 17 height: 75px; 18 float: left; 19} 20/* Basic block */ 21.block { 22 background-color: gray; 23 display: inline-block; 24 width: 50px; 25 height: 50px; 26} 27/* Set color on the target to be different than the others */ 28#target-block { 29 background-color: rgb(0, 0, 0); 30} 31#target-block:hover { 32 background-color: rgb(0, 255, 0); 33} 34#outside-region { 35 clear: both; 36 width: 75px; 37 height: 75px; 38 background-color: rgb(255, 191, 0); 39 margin: 25px; 40} 41#outside-region:hover { 42 background-color: rgb(0, 255, 0); 43} 44#log { 45 clear: both; 46}