html - floating a div into left -

just want make div of list float left one

just having hard time , wondering did go wrong there, did put wrong division or something

my css

.list_wrapper{ width:200px; background-color:red; display:block;}    .list_wrapper2{ width:900px; background-color:blue; float:left; } 

my html

    <div class = "list_wrapper2" > <h3><?php echo $letter?></h3>  <?php foreach($pages $page): ?>             <div class = "list_wrapper" >             <ul>                 <li class="listcss">                 <a href="<?php echo base_url;?>/page.php?page=<?php echo e($page['slug']);?>"><?php echo e($page['label']);?></a>                 </li>             </ul>             </div> <?php endforeach; ?> <?php endfor; ?> </div> 

try display: inline-block instead of float: left. here example started.

note: float wrap div's next row on overflow!

.wrapper {    overflow: scroll;    white-space: nowrap;  }  .wrapper > div {    display: inline-block;    min-width: 50px;    min-height: 50px;    background-color: cornflowerblue;  }

<div class="wrapper">    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>    <div>5</div>    <div>6</div>    <div>7</div>    <div>8</div>    <div>9</div>    <div>10</div>  </div>