Raymart Calinao AsthreA Raymart Calinao AsthreA - 4 months ago 10
HTML Question

floating a div into left

Just want to make all my div of list to float to left like this one

enter image description here

just having a hard time and wondering where did i go wrong there, did i put a 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 as $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>

Answer

Try display: inline-block instead of float: left. Here is an example to get started.

Note: float will wrap the div's to 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>