Perhaps the word “animate” is incorrect. The actual problem is this:
I have a set of divs which:
a. when the user is viewing the site and the view-port width is less than a 1200 then the divs are positioned at 90% width underneath each other. (no float)
b. When the user views the page wider than 1200 then the divs reposition to 45% width, floating left – so i effectively get 2 next to each other in each row.
c. div’s may have a variable height so then they also may not reposition correctly underneath each other.
This causes a jerk when they reposition and can get quite confusing to see where the div has repositioned to and there may be gaps in the layout because the next row (of 2) is not cleared.
How can i make the movement of the div’s when they reposition to be smoothly animated and also set them to position correctly underneath each other.
for problem (c) I have used the div:nth-child(2n+1) { clear:both; } css rule which works for newer browsers, but has problems on others.
For the smooth moving of the div’s when they change position, i have no idea. I do somehow feel that i may have to go for something other than float:left; for those for it to work.
Any help would be greatly appreciated. Would be great, Chris, if you could write a blog article for this (if you haven’t already).
regards
Will
