CODEWITHSUNDEEP
jqueryhtmlcss
Alok Banjare
Alok Banjare

Reputation: 170

Floating unequal height divs side by side

I am trying to create floating divs as mentioned in the below picture (uploaded on the below link), I am using float left to move all divs side by side.

Picture

First picture has the default divs,

when we click on the div its height expands, as mentioned in second picture third div should come exactly below the first one without disturbing other divs, as mentined in third picture same as second picture when we click on second div the fourth div should float bottom and should not disturb other divs. First, second and third picture has four divs but the divs can be of any number. In fourth picture we have only three divs and when we click on 1st div third div should move right side and it should happen the same when we have five or seven divs. How i can perform this task by using css?

Upvotes: 0

Views: 394

Answers (1)

Ali Green
Ali Green

Reputation: 609

You'd have to use Javascript/JQuery if you want click events to grow the size of the DIVs. I wouldn't recommend floats - here's a quick pointer using inline-block instead. You could use flexbox but it depends what browsers you need to support?

http://jsbin.com/domokefipi/1/edit

Upvotes: 0

Related Questions