CODEWITHSUNDEEP
htmlcss
Sreeraj Chundayil
Sreeraj Chundayil

Reputation: 5859

Why doesn't work clear:both?

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;
}

Upvotes: 0

Views: 1463

Answers (1)

Rob
Rob

Reputation: 15150

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

Upvotes: 1

Related Questions