[RbnJrg]

Originally Posted by ElMiko

@RbnJrg - So, I'm still struggling to see the difference between float and in-line block. They boy seem to make the element "float". Is it that the formal "float" will only work in terms of floating all the way right or all the way left, whereas inline-block can "float" relatively throughout a given element?

Maybe this can help you:

  <h2>Example on inlined blocks</h2>

  <p><span class="col1">A label</span><span class="col2">The text asociated to the label on the left. As you can see this text does not surround the previous one</span></p>

  <h2>Example on floated blocks</h2>

  <p><span class="col3">A label</span><span class="col4">The text asociated to the label on the left. As you can see this text does surround the previous one</span></p>

.col1 {
  display: inline-block;
  width: 20%;
  vertical-align: top;
  background: lightgreen;
}

.col2 {
  display: inline-block;
  width: 80%;
  vertical-align: top;
  background: lightblue;
}

.col3 {
  float: left;
  padding-right: 4px;
  background: orange;
}

.col4 {
  background: khaki;
}

However, if in .col4 you add the properties:

  float: right;
  width: 80%;

apparently they have a similar appearance. BUT the solution with "display: inline-block" keeps the blocks together (they have the "page-break-inside: avoid" property implicit), and that doesn't happen when the blocks are floating.