css white-space: nowrap ngang cuộn lỗi

Question

Tôi có đánh dấu sau

<style type="text/css"> 
    #outer 
    { 
     min-height: 100%; 
     height: auto !important; 
     height: 100%; 
     width:100%; 
     white-space:nowrap; 
    } 

    #inner 
    { 
     background-color:#CCCCCC; 
     margin:0px 4px 0px 4px; 
     padding:5px 5px 0px 5px; 
     border:1px solid #9A9A9A; 
     border-width:1px 1px 0px 1px; 
    } 

</style> 

<div id="outer"> 
    <div id="inner"> 
    TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
    </div> 
</div> 

Khi trình duyệt là đủ rộng, nó trông như thế này

Khi duyệt được thay đổi kích cỡ hẹp, có vẻ như thế này

Tôi muốn nền màu xám của chế độ xem hẹp để mở rộng tất cả các con đường sang phải khi tôi cuộn. Điều gì về đánh dấu và css của tôi đang gây ra hiệu ứng không mong muốn này (xảy ra trong Chrome, FF3 và IE8)

Answer 1

Một giải pháp dễ dàng là thực hiện việc này: trên #outer, xóa width: 100% và thêm float: left.

Live Demo