Converting absolute layout to use floats

Question

I’m looking for some advice on a project I am working on and would be appreciative of any assistance.

Aim:

To make a drag and drop CMS which allows a user to d

Answer 1

I think you should be careful: from what it sounds like you are trying to build a WYSIWYG interface using absolute positioning and size that turns into something that is not WYSIWYG in the end; variable widths and positioning depending on screen size.

You have come across one of the fundamental problems of modern responsive design; websites aren't WYSIWYG anymore. Its virtually impossible to convey all the different ways a well designed mobile site will look in a single image.

Your users will have to conform to the same constraints that designers have with mobile design, in that elements have to flow gracefully between screen sizes. This usually means constraining content to a grid or a single plane (ie columns or rows), or designing twice; once for mobile, once for desktop.

That being said, one of the few grid systems i have seen that works with absolutely positioned and sized elements is the Masonry Grid. It takes elements of any size and tries to fit them together as best it can without breaking the flow of the page. It's often seen used in magazine or portfolio sites where long form written content is rare.

With a decent rules system and special elements that create negative space (ie. full width dividers, 'empty' blocks, full height sidebars) you could give your users the tools to create a site that rearranges itself pretty well using Masonry Grid for everything.