Why doesn't work clear:both?

Question

Here I was expecting count to move down below each *ID classe, but it doesn't happen. Each *ID and its corresponding count are in the same line. How do I fix this and why wasn't it getting cleared?

<div class="statusInfo">
  <div class="Scribbles">
    <div class="ScribblesID">Scribbles</div>
    <div class="count">100</div>
  </div>
  <div class="Following">
    <div class="FollowingID">Following</div>
    <div class="count">100</div>
  </div>

  <div class="Followers">
    <div class="FollowersID">Followers</div>
    <div class="count">100</div>
  </div>
</div>

CSS

.statusInfo {
  position: absolute;
  bottom: 30px;
}
.Scribbles {
  float: left;
}
.Following {
  float: left;
}
.Followers {
  float: left;
}
.ScribblesID {
  display: inline-block;
  float: left;
}
.FollowingID {
  display: inline-block;
  float: left;
}
.FollowersID {
  display: inline-block;
  float: left;
}
.count {
  display: inline-block;
  clear: both;
}

Float property doesn't work with inline/inline-block property of display. If you are using inline-block then it creates block element in same line, so you don't need float. — ali, Jun 18 '16 at 19:14
`clear: both` must be applied to an element after all the floats, not inside one. You can also get the same effect by applying `overflow: auto` to the container (.statusInfo). — Jim Cote, Jun 18 '16 at 19:25
@JimCote: But inside 2 elements are there, first one float:left and next clear. So this should work, right? — Sreeraj Chundayil, Jun 18 '16 at 19:27
@Rob: when you use float then you element is no more inline element. After using float it is block element, you can avoid using inline and float together. (http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell) — ali, Jun 18 '16 at 19:31

score 1 · Accepted Answer · answered Jun 18 '16 at 19:27

1

The clear property only works on block level elements. You are using inline-block and clear:both; won't apply to that.

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

answered Jun 18 '16 at 19:27

Rob

14,746
28
47
65

Why doesn't work clear:both?

1 Answers1