JimF JimF - 3 months ago 11
CSS Question

Horizontal Overflow refuses to work

I have some html/css below:

#wrapper {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}

.completebook2 {
background: red;
border: 1px solid #e4e4e4;
float:left;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
white-space: nowrap;
}
.completebook3 {
border: 1px solid #e4e4e4;
padding: 10px;
}
.completebook4 {
border: 1px solid #e4e;
padding: 10px;
background-color: chocolate;
}
.cover{
background: green;
}


http://codepen.io/anon/pen/WGZgzr

I cannot get horizontal scroll bars to appear no matter what. Also
I was able able to get horizontal scroll bars to appear in an earlier version of code but when I added a new node the horizontal scroll bars broke.

Also completebook2 is a node and pretty much needs to stay as well as the inner nodes of completebook2

Any ideas on this?

Thanks,
Jim

Answer

Change .completebook2:

  • remove float:left;
  • add display: inline-block;

        #wrapper {
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        }
        
        .completebook2 {
        background: red;
        border: 1px solid #e4e4e4;
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
        white-space: nowrap;
        display: inline-block;
        }
        .completebook3 {
        border: 1px solid #e4e4e4;
        padding: 10px;
        }
        .completebook4 {
        border: 1px solid #e4e;
        padding: 10px;
        background-color: chocolate;
        }
        .cover{
        background: green;
        }
  <div id="wrapper">
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
            <div class="completebook2">
                <div class="cover">
                    <div class="completebook3">Post t</div>
                    <div class="completebook3">Post t</div>
                </div>
                <div class="completebook4">Post b</div>
            </div>
            
            
        </div>