-1

float is not working when any child element is greater than others. Here is the jsfiddle.

`https://jsfiddle.net/vs8bud2w/4/`

div2 is having height 120px;others have height 100px;So fifth element is not floating to left instead it stuck near div2.

How to fix this? even clear both is not working.

Aditya kumar
  • 167
  • 2
  • 8

2 Answers2

1

You can use this:

.three {
   clear: left;
}

Meaning that no floating elements allowed on the left side.

Torjescu Sergiu
  • 1,483
  • 10
  • 24
  • that will solve the issue in this case.But I also have scenario like height is dynamic So you dont know which did has what height because height is determined based on response data.So how to solve that – Aditya kumar Aug 06 '18 at 12:13
0

Looking at the hierarchy of your elements, parent holds child, which is divided into one, two, and three. The width:25% of each child makes 4 elements take up the 100% width, hence the last element (child three, green) comes below them.

But since they are still contained within the parent parent div, it cannot float on top of another element that is already there, which is taking some place there (yellow with height: 120px ).

To make the green line up to the left, either make the height of all the elements equal, or put the green box (child three) outside the parent div.

Or you can also use the clear: left property for child three.

Akash Srivastav
  • 756
  • 5
  • 15