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

There's a website creator tool called Weebly that has the same functionality you're looking for. It's free of charge, so you can have a look to learn more about its features.

What you're asking for is really vague, so I divided the answers into several parts:

1- For the Drag-and-Drop feature:

This is exactly what you're looking for: Gridster

You can let the user resize the boxes while keeping constraints.

2- If you're looking for a clean CSS Framework:

• Twitter's Bootstrap
• Foundation
• and many more

3- If you're looking for a fluid layout which covers the whole page (vertically and horizontally):

html,
body {height:100%; margin:0px; padding:0px;}
.wrapper {position:relative; height:100%; width:100%; display:block;}
.header {position:relative; height:22%; width:100%; display:inline-block; margin-bottom:3%; background:red;}
.footer {position:relative; height:22%; width:100%; display:inline-block; margin-top:3%; background:green;}
.content {position:relative; height:50%; width:100%; display:inline-block;}
.content .left_sidebar {float:left; width:17%; height:100%; position:relative; margin-right:3%; background:yellow;}
.content .right_sidebar {float:right; width:17%; height:100%; position:relative; margin-left:3%; background:purple;}
.content .middle {float:left; width:60%; height:100%; position:relative; background:cyan;}

/**
 * @info Clearfix: clear all the floated elements
 */
.clearfix:after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
.clearfix {display:inline-table;}
	
/**
 * @hack Display the Clearfix as a block element
 * @hackfor Every browser except IE for Macintosh
 */
   /* Hides from IE-mac \*/
   * html .clearfix {height:1%;}
   .clearfix {display:block;}
   /* End hide from IE-mac */

    
Header
    

        
Left Sidebar
        
Middle
        
Right Sidebar
        

    
    
Footer

Keep in mind that doing so will destroy the user experience on mobile devices.