css - Can't add overflow-x to container of floats -

i want add horizontal scroll-bar footer, when there not enough space divs, instead drops lower line.

i added

overflow-x: auto; overflow-y: hidden; 

but still doesn't work. how should fix it?

footer {    background: yellow;    position: absolute;    margin: 0 auto;    left: 0;    bottom: 0;    height: 150px;    font-size: 12px;    text-align: center;    overflow-x: auto;    overflow-y: hidden;  }  footer #items {    display: inline-block;    height: 150px;  }  footer #items div {    margin-left: 7px;    margin-top: 7px;    float: left;    height: 134px;    width: 134px;    border-style: solid;    border-color: #752b01;    border-width: 2px;    display: inline-block;  }

<footer>    <div id="items">      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>    </div>  </footer>

use inline-blocks instead of floats, , prevent line breaks:

#items {   white-space: nowrap; } #items div {   float: none; } 

footer {    background: yellow;    position: absolute;    margin: 0 auto;    left: 0;    bottom: 0;    height: 150px;    font-size: 12px;    text-align: center;    overflow-x: auto;    overflow-y: hidden;  }  #items {    display: inline-block;    height: 150px;    white-space: nowrap;  }  #items div {    margin-left: 7px;    margin-top: 7px;    height: 134px;    width: 134px;    border-style: solid;    border-color: #752b01;    border-width: 2px;    display: inline-block;  }

<footer>    <div id="items">      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>    </div>  </footer>

alternatively, if want use floats, need

#items {   width: max-content; } 

footer {    background: yellow;    position: absolute;    margin: 0 auto;    left: 0;    bottom: 0;    height: 150px;    font-size: 12px;    text-align: center;    overflow-x: auto;    overflow-y: hidden;  }  #items {    display: inline-block;    height: 150px;    width: -webkit-max-content;    width: -moz-max-content;    width: max-content;  }  #items div {    margin-left: 7px;    margin-top: 7px;    height: 134px;    width: 134px;    border-style: solid;    border-color: #752b01;    border-width: 2px;    float: left;  }

<footer>    <div id="items">      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>      <div></div>    </div>  </footer>

but note browsers require vendor extensions , others don't support yet.