javascript - Converting absolute layout to use floats -

i’m looking advice on project working on , appreciative of assistance.

aim:

to make drag , drop cms allows user draw elements on grid , move them desired position. changes recorded in json format , converted html/css when user presses publish button. resultant html should clean , flexible (i.e. cater content vary in height/length). system should able handle creating e-commerce sites simple information sites.

problem:

the logical way achieve drag , drop system in html use absolute positioning set widths , heights; method doesn't lend finished site content of variable lengths , absolutely positioned elements taken out of flow of document unaware of elements around them.

solution:

create system converts absolutely positioned elements floated elements.

example:

in cms system user creates following layout drawing boxes on grid:

1. header of fixed height
2. navigation of variable height
3. image of fixed height
4. main content of page of variable height
5. list of visited items of variable height
6. footer of fixed height

absolute layout:

the html/css this:

body {      background-color: #999999;      font-family: verdana, arial, helvetica, sans-serif;      font-size: 70%;      margin: 15px 0;      padding: 0;  }  #maincontainer {      background-color: #ffffff;      height: 500px;      margin: 0 auto;      position: relative;      width: 916px;  }  .contentblock {      border: 1px solid orange;      box-sizing: border-box;      color: orange;      font-size: 2em;      text-align: center;  }  .contentblock:after {      content: "";      display: inline-block;      height: 100%;      vertical-align: middle;  }  #contentblock1 {      height: 120px;      left: 0;      position: absolute;      top: 0;      width: 916px;  }  #contentblock2 {      height: 100px;      left: 0;      position: absolute;      top: 140px;      width: 136px;  }  #contentblock3 {      height: 100px;      left: 0;      position: absolute;      top: 260px;      width: 136px;  }  #contentblock4 {      height: 220px;      left: 156px;      position: absolute;      top: 140px;      width: 604px;  }  #contentblock5 {      height: 220px;      left: 780px;      position: absolute;      top: 140px;      width: 136px;  }  #contentblock6 {      height: 120px;      left: 0;      position: absolute;      top: 380px;      width: 916px;  }

<div id="maincontainer">      <div class="contentblock" id="contentblock1">1</div>      <div class="contentblock" id="contentblock2">2</div>      <div class="contentblock" id="contentblock3">3</div>      <div class="contentblock" id="contentblock4">4</div>      <div class="contentblock" id="contentblock5">5</div>      <div class="contentblock" id="contentblock6">6</div>  </div>

the user hits publish button , layout converted use floats instead absolute positioning. resultant html cannot use absolute positioning because if content in 2 or 4 expands go over/under 3 , 6. floats keep elements in flow , aware of each other following cater dynamic content in 2 , 4:

floated layout:

the html/css this:

body {      background-color: #999999;      font-family: verdana, arial, helvetica, sans-serif;      font-size: 70%;      margin: 15px 0;      padding: 0;  }  #maincontainer {      background-color: #ffffff;      margin: 0 auto;      width: 916px;  }  .contentblock {      border: 1px solid orange;      box-sizing: border-box;      color: orange;      font-size: 2em;      text-align: center;  }  .contentblock:after {      content: "";      display: inline-block;      height: 100%;      vertical-align: middle;  }  #contentblock1 {      margin-bottom: 20px;      height: 120px;  }  #contentblock2 {      height: 100px;      margin-bottom: 20px;      width: 136px;  }  #contentblock3 {      height: 100px;      margin-bottom: 20px;      width: 136px;  }  #contentblock4 {      float: left;      height: 220px;      margin-bottom: 20px;      margin-left: 20px;      width: 604px;  }  #contentblock5 {      float: left;      height: 220px;      margin-bottom: 20px;      margin-left: 20px;      width: 136px;  }  #contentblock6 {      clear: left;      height: 120px;  }  #contentcontainer1 {      float: left;      width: 136px;  }

<div id="maincontainer">      <div class="contentblock" id="contentblock1">1</div>      <div id="contentcontainer1">          <div class="contentblock" id="contentblock2">2</div>          <div class="contentblock" id="contentblock3">3</div>      </div>      <div class="contentblock" id="contentblock4">4</div>      <div class="contentblock" id="contentblock5">5</div>      <div class="contentblock" id="contentblock6">6</div>  </div>

it cannot expected user understand how floating elements work, process need automatic when changes published.

this particular example quite simple, although more advanced layouts need handled well.

what other cms systems do:

as far can tell, cms systems either fix user set template or build page using javascript set heights/position of absolutely positioned elements (which avoid).

my questions:

• is possible devise set of rules convert absolute layout floated one?
• if there existing cms it?
• any suggestions on other ways tackle issue?

thanks.

first : don't think "converting" absolute layout float best approach. should think floats beginning , hint/teach user build layout accordingly.

second : believe tool want build need users learn how use it. said want make simple enough people not familiar html/css concepts able use it. need base use of tool on simple , understandable concepts users can use build "look" , generate code behind it.

ones can think of :

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

now using these concepts enable user create blocks properties : number of columns content width/height margin/padding. user can nest blocks indefinitly these properties , drag-drop content inside them.

here how work example :

header :

the user creates block , gives these properties :

• width:100%
• height:80px (this can done draging elements border)
• number of columns 2 (one logo , 1 menu)

main :

the user creates new block under header these properties :

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

footer

new block same properties header.

the use can start again inside each block/column , can nest new ones same properties

generating code :

you know number of columns of each block , widths can create div each , use floats/width position them side side. heights : user can set fixed height , won't difficult him understand content can overflow. if doesn't want must select "adaptive" height (height : auto; in css).

conclusion :

this general idea , simple concept. main work on ui design , way hint/teach user build layouts tool. keep in mind disigning , how react in different situations. use best ui skills hint/teach use in right direction.