css - Gap between floating divs -

i wondered how fix gap between floating elements if don't have same height:

here can see gap between featured , notice rid of. (get's larger when screen resolution larger since featured box becomes more stretched , text spreads on less lines)

maybe important note order of floating left elments:

1. featured
2. news
3. headlines
4. notice

layout smaller screens (this looking fine wanted show mean in following description inconsistent layout based on screen resolution)

if design consistent wouldn't mind implementing kind of grid system in case i'm using styles based on screen resolution @ screen resolution boxes change 50% 100% width (no fixed value used here).

i thought fluid girds might right way go after checking them (never used them before) feel rather static , i'm not sure can solve problem.

edit: sample of broblem: http://jsfiddle.net/ufvrh/. note fixed height values in a-d there simulate content stretching div.

to fix such issue need calculate width , height of each element , re-arrange them positioning them absolutely, luckily there such plugin this, isotope