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

First : I don't think "converting" an absolute layout to float is the best approach. You should think floats from the beginning and hint/teach the user to build the layout accordingly.

Second : I believe the tool you want to build will need the users to learn how to use it. This said you want to make it simple enough for people not familiar with HTML/CSS concepts to be able to use it. So you need to base the use of this tool on simple and understandable concepts that users can use to build the "look" and you to generate the code behind it.

Ones I can think of are :

• blocks/container
• columns
• height/width
• margin/padding

Now using these concepts you could enable the user to create blocks with properties : number of columns for the content width/height margin/padding. The user can then nest blocks indefinitly with these properties and drag-drop content inside them.

Here is how it could work for your example :

Header :

The user creates a block and gives it these properties :

• width:100%
• height:80px (this can be done by draging the elements border)
• number of columns 2 (one for the logo and one for the menu)

Main :

The user creates a new block under the header with these properties :

• width:100%
• height: adaptive
• number of columns : 3 (col 1 and 3 : 15% width, col 2 70% width)

Footer

New block with same properties as the header.

The use can then start again inside each block/column and can nest new ones with the same properties

Generating the code :

You know the number of columns of each block and their widths so you can easily create a div for each and use floats/width to position them side by side. For the heights : the user can set a fixed height and it won't be difficult for him to understand that the content can overflow. So if he doesn't want that he must select the "adaptive" height (height : auto; in css).

Conclusion :

This is a very general idea and simple concept. The main work will be on the UI design and the way you will hint/teach the user to build layouts with your tool. Keep in mind who you are disigning for and how they would react in different situations. Use your best UI skills to hint/teach the use in the right direction.