1

I am using this code structure:

.pull-left {
  float: left;
}
.align_center {
  text-align: center;
}
.width_33 {
  width: 33%;
}
.cleaner {
  clear: both;
}
<ol class="stats">
  <li>
    <div class="pull-left width_33">
      Pete
    </div>
    <div class="pull-left align_center width_33">
      1 client
    </div>
    <div class="pull-left align_right width_33">
      <span title="Commissions">
        $28.61
      </span>
    </div>
    <div class="cleaner"></div>
  </li>
</ol>

This is the result: enter image description here

Why the "1." is not on the beginning of the line (that's where I would like to get it)?

Thank you in advance.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
user984621
  • 46,344
  • 73
  • 224
  • 412

2 Answers2

1

I found a little workaround. Use display:inline-block; instead of float and wrap the div elements in a wrapper div:

<ol class="stats">
  <li>
  <div id="wrapper">
    <div class="pull-left width_33">
     Pete
    </div>
    <div class="pull-left align_center width_33">
     1 client
    </div>
    <div class="pull-left align_right width_33">
      <span title="Commissions">
        $28.61
      </span>
    </div>
    <div class="cleaner"></div>
  </div>
 </li>
</ol>

CSS

.pull-left {
 display:inline-block;
}
.align_center {
 text-align: center;
}
.align_right{
 text-align:right;
}
.width_33 {
  width: 32%;
}

Note: I made each div 32% instead of 33% to prevent a wrap to the next line

Fiddle

A.Sharma
  • 2,771
  • 1
  • 11
  • 24
  • I tried to avoid using `display: inline-block;` (and use instead of that that `float`), but it seems to be the fastest way to fix it. Thanks! – user984621 Feb 19 '16 at 21:30
0

You need to clear the space to the left of the first left-floated div in the li.

.pull-left {
  float: left;
}
.align_center {
  text-align: center;
}
.width_33 {
  width: 33%;
}
.cleaner {
  clear: right;
}
.full {
  display: block;
  width: 100%;
}
.stats li >div {
  display: inline-block;
}
<ol class="stats">
  <li>
    <div class='full'>
      <div class="pull-left width_33">
        Pete
      </div>
      <div class="pull-left align_center width_33">
        1 client
      </div>
      <div class="pull-left align_right width_33">
        <span title="Commissions">
        $28.61
      </span>
      </div>
    </div>
  </li>
</ol>
stark
  • 2,246
  • 2
  • 23
  • 35