I am currently doing the Prototype of an Interface where it will have the page divided into 3 sections:

1) A side column on the left side with width:25%; where the user form will be.

2) A column in the center with width:50% where an interactive matrix will be.

3) A side column on the right side with width:25% where there will be a list of interactive questions as well.

Integrated Example

I have created three% of different% of each other by dividing in ids , <div id="left-column"> and <div id="center-column"> where respectively <div id="right-column"> is subject to different styles.

HTML

<div id="left-column">

      <h1>Receive Your Answer</h1>
    <div class="contact">
    <form method="post" enctype="multipart/form-data"  action="#" id="image-form">
      <div class="three_col">
        <select>
          <option value="title">Title</option>
          <option value="mr">MR</option>
          <option value="mrs">MRS</option>
          <option value="ms">MS</option>
          <option value="dr">DR</option>
        </select>
        <input type="text" name="fname" placeholder="First Name" class="default" msg="Error for First name">
        <span class="error"></span>
        <input type="text" name="lname" placeholder="Last Name" class="default" msg="Error for Last name">
        <span class="error"></span>
      </div>
      <div class="one_col email">
        <input type="text" name="email" placeholder="Email Address" class="default" msg="Please enter a valid email">
        <span class="error"></span>
      </div>
      <div class="one_col">
        <input id="submit" type="submit" value="Submit" />
      </div>
      <span class="clear"></span>
    </form>
  </div>

</div>

<div id="center-column">

  <div class="q-sort">
    <button ng-click="dbteste.SaveAnswer()">Teste</button>
      <div id = "teste3" ng-controller="teste3 as app"> <!--FIXME finish this -->
         <ul>
                 <li ng-repeat="answers in app.answers">
                     {{ answers.ans }}
                 </li>

             </ul>
         <button ng-click="app.SaveAnswer()">Teste</button>

      </div>
  </div>

</div>

<div id="right-column">

  <div id="page">

    <div id="workarea">
      <h1>Quetions List</h1>

      <div id="completed-questions">
        <h3>
          <em class="icon-ok icon-large"></em>Completed
        </h3>   
      </div><!-- #completed-questions -->

      <div id="questions" class="question-panels">
        <div id="question-1" class="question-panel">
          <h4 class="question-name">Questions</h4>
          <div class="toolbar">
            <a href="#" class="add-task icon icon-plus"></a>
          </div>

          <div class="text-list">
            <div id="text-1" class="text">
              <p>Pergunta 1</p>
              <div class="actions">
                <a href="#" class="icon-caret-right"></a>
                <a href="#" class="icon-ok"></a>
                <a href="#" class="icon-pencil"></a>
                <a href="#" class="icon-trash"></a>
            </div>
          </div>

          <div id="text-2" class="text">
            <p>Pergunta 2</p>
            <div class="actions">
              <a href="#" class="icon-caret-right"></a>
              <a href="#" class="icon-ok"></a>
              <a href="#" class="icon-pencil"></a>
              <a href="#" class="icon-trash"></a>
            </div>
          </div>

          <div id="text-3" class="text">
            <p>Pergunta 3</p>
            <div class="actions">
              <a href="#" class="icon-caret-right"></a>
              <a href="#" class="icon-ok"></a>
              <a href="#" class="icon-pencil"></a>
              <a href="#" class="icon-trash"></a>
            </div>
          </div>

          <div id="text-4" class="text">
            <p>Pergunta 4</p>
            <div class="actions">
              <a href="#" class="icon-caret-right"></a>
              <a href="#" class="icon-ok"></a>
              <a href="#" class="icon-pencil"></a>
              <a href="#" class="icon-trash"></a>
            </div>
          </div>

          <div id="text-5" class="text">
            <p>Pergunta 5</p>
            <div class="actions">
              <a href="#" class="icon-caret-right"></a>
              <a href="#" class="icon-ok"></a>
              <a href="#" class="icon-pencil"></a>
              <a href="#" class="icon-trash"></a>
            </div>
          </div>

          <div id="text-6" class="text">
            <p>Pergunta 6</p>
            <div class="actions">
              <a href="#" class="icon-caret-right"></a>
              <a href="#" class="icon-ok"></a>
              <a href="#" class="icon-pencil"></a>
              <a href="#" class="icon-trash"></a>
            </div>
          </div>

          <div id="text-7" class="text">
            <p>Pergunta 7</p>
            <div class="actions">
              <a href="#" class="icon-caret-right"></a>
              <a href="#" class="icon-ok"></a>
              <a href="#" class="icon-pencil"></a>
              <a href="#" class="icon-trash"></a>
            </div>
          </div>

          <div id="text-8" class="text">
            <p>Pergunta 8</p>
            <div class="actions">
              <a href="#" class="icon-caret-right"></a>
              <a href="#" class="icon-ok"></a>
              <a href="#" class="icon-pencil"></a>
              <a href="#" class="icon-trash"></a>
            </div>
          </div>

        </div>

      </div><!-- #questions -->

    </div><!-- #workarea -->

  </div><!-- #page -->

</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato);
@baseBlue: #353538;
@baseDarkRed: #00aeed;
@baseLightRed: #00aeed;

::selection
{
  color:inherit;
}
::-moz-selection
{
  color:inherit;
}
body {
    background-color: #353538;
    color: #333;
  font-family: Lato;
  -webkit-font-smoothing: antialiased;
}
[contenteditable="true"]:focus {
  outline: 1px solid black;
}
h1{
  margin: 20px;
  text-align: left;
  color: @baseDarkRed;
}

h2{
  text-align: right;
  line-height: 1;
  margin: 0 0 10px 0;
  padding: 0;
}
h3{
  line-height: 1.5;
  margin: auto;
  padding: 0;
  color: @baseLightRed;
}
h4 {
  line-height: 1;
  margin: 0;
  padding: 0;
  text-align: left;
  color: @baseLightRed;
}
a {
  color: darken(@baseLightRed, 10%);
  transition: all 0.3s ease-in-out;
}
a:hover {
  color: darken(@baseLightRed, 20%);
  text-shadow: 0px 0px 12px @baseLightRed;
}
#left-column {
  width:25%;
  float:left;
  display:inline-block;
}
#center-column {
  width:50%;
  float:center;
  display:inline-block;
}
#right-column {
  width:25%;
  float:right;
  display:inline-block;
}

/* ========================= */

/*
 *  FORM
 */

.left-column *{
  color:#333;
  padding:0px;
  margin:0px;
  border:0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.contact{
    position:relative;
    width:60%;
    max-width:700px;
    margin:0 auto 0%;
    padding:10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px; 
    background:rgba(51,51,51,0.05);
}

.three_col , .one_col{
    float:left;
    width:100%;
    position:relative;
}

.three_col input, .one_col input, .three_col select, .one_col textarea, .one_col  #file {
    position:relative;
    padding:5px 5px;
    margin:1% 2%;
    float:left;
    z-index:10;
    border:1px solid #ccc;
    background:url(http://www.olliehusbanddesign.co.uk/form/images/tick.jpg) 120% 0 no-repeat #fff;
}

.three_col span.error, .one_col span.error{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    display: block;
    font-size: 10px;
    height: 35px;
    left: 0;
    padding: 10px 15px;
    position: absolute;
    top: -33px;
    left:25%;
    width: auto;
    z-index:999999999;
    display:none;
}

.three_col span.error:nth-child(5){
    left:65%;
}

.three_col span.error:after, .one_col span.error:after{
    background: url("http://www.olliehusbanddesign.co.uk/form/images/popup_arrow.png") repeat scroll 0 0 transparent;
    bottom: -7px;
    content: "";
    height: 7px;
    left: 47%;
    position: absolute;
    width: 17px;
}   
.three_col select{
    width:16%;
    background:#fff;
    padding:4px;
}
.three_col input{
    width:36%;
}   

.one_col input, .one_col textarea, .one_col  #file {
    width:96%;
}

.one_col  #file {
  background: url("http://www.olliehusbanddesign.co.uk/form/images/Camera_icon.png") no-repeat scroll center 35px transparent;
    border: 1px dotted #CCCCCC;
    cursor: pointer;
    display: none;
    float: right;
    position: relative;
    text-align: center;
    width: 96%; 
}

.one_col  #file p{
padding: 95px 0 0;
line-height: 40px;
}

.one_col #image-list li{
    list-style:none;    
    border:1px solid #ccc;  
    margin: 2%;
    background:#fff;
}

.one_col #image-list li img{
    width:98%;
    height:98%;
    margin: 1% !important;
}

.one_col #submit{
    border-top-color: #4d4d4d;
   background: #eaeaea;
   color: lighten(#333, 30%);
   cursor:pointer;
}

.one_col #submit:hover{
    background: #808080;
   color: #d6d6d6;
}   

.clear{
    clear:both;
    content:"";
    line-height:0px;
    display: block;
}

/* old browser fixed */

.no-rgba .contact,  .no-rgba .three_col span.error,  .no-rgba .one_col span.error{
    background:url(http://www.olliehusbanddesign.co.uk/form/images/norgba_bg.png) !important;
}

.no-canvas .one_col, .no-canvas .three_col, .no-canvas .one_col input, .no-canvas .three_col input{
    float:right !important; 
    margin-right:0;
    margin-bottom:0;
}

.no-canvas .three_col input{
    width:34% !important;
    margin-right:0;
    margin-bottom:0;
    float:right;
}


.no-canvas .file-upload  div{
    display:block !important;
    height:auto !important;
    width: 45% !important;
    float:right;
}

.no-canvas .one_col  #file{
    display:none !important;
}

/* animations */


@-moz-keyframes default-to-error {
    0%{
        background-position:120% -28px;
    }
    50%{
        background-position:right -28px;
    }
}

@-moz-keyframes default-to-success {
   0%{
        background-position:120% 0px;
    }
    50%{
        background-position:right 0px;
    }
}

@-moz-keyframes error-to-success {
    0%{
        background-position:right -28px;
    } 
    50%{
        background-position:120% -28px;
    } 
    60%{
        background-position:120% 0px;
    }
    100%{
        background-position:right 0px;
    }
}

@-moz-keyframes success-to-error {
    0%{
        background-position:right 0px;
    } 
    50%{
        background-position:120% 0px;
    } 
    60%{
        background-position:120% -28px;
    }
    100%{
        background-position:right -28px;
    }
}
@-webkit-keyframes default-to-error {
    0%{
        background-position:120% -28px;
    }
    50%{
        background-position:right -28px;
    }
}

@-webkit-keyframes default-to-success {
   0%{
        background-position:120% 0px;
    }
    50%{
        background-position:right 0px;
    }
}

@-webkit-keyframes error-to-success {
    0%{
        background-position:right -28px;
    } 
    50%{
        background-position:120% -28px;
    } 
    60%{
        background-position:120% 0px;
    }
    100%{
        background-position:right 0px;
    }
}

@-webkit-keyframes success-to-error {
    0%{
        background-position:right 0px;
    } 
    50%{
        background-position:120% 0px;
    } 
    60%{
        background-position:120% -28px;
    }
    100%{
        background-position:right -28px;
    }
}


input.default-to-error{
    -webkit-animation: default-to-error 0.5s;
    -moz-animation: default-to-error 0.5s;
    -animation: default-to-error 0.5s;
      background-position:right -28px;    
      -webkit-box-shadow:0 0 7px rgba(243,38,36, 0.6); 
    -moz-box-shadow: 0 0 7px rgba(243,38,36, 0.6); 
    box-shadow:0 0 7px rgba(243,38,36, 0.6); 
}

input.default-to-success{
    -webkit-animation: default-to-success 0.5s;
    -moz-animation: default-to-success 0.5s;
    -animation: default-to-success 0.5s;
      background-position:right 0px;        
    -webkit-box-shadow:0 0 7px rgba(161,199,54, 0.6); 
    -moz-box-shadow: 0 0 7px rgba(161,199,54, 0.6); 
    box-shadow:0 0 7px rgba(161,199,54, 0.6); 
}


@media handheld, only screen and (max-width: 580px) {

    .contact{
        width:90%;
    }

    .one_col  #file{
        width:96%;
    }

    .three_col input, .one_col input, .three_col select, .one_col textarea{
        width:96%;
        margin:2% 2%;
    }

    .three_col input, .one_col input{
        padding-right: 21px;
    }   

    .three_col span.error, .one_col span.error{
        display:none !Important;
    }
}

/*
 *  END FORM
 */

/* ========================= */

/*
 *  Q-SORT
 */

/*
 *  END Q-SORT
 */

/* ========================= */

/*
 *  DG-QUESTIONS
 */

#page {
    width: 500px;
    margin: 0px auto;
}
#questions{
  float: left;
  margin: 0 0 0 20px;
}
#questions h3 {
  text-align: right;
}
#completed-questions{
  float: left;
  width: auto;
  padding: 0px;
  overflow-x: hidden;
  white-space: nowrap;
}
#completed-questions.open {
  width: auto;
}
#completed-questions .actions{
  display: none;
}
#completed-questions .text{
  border-width: 0px 0px 1px 0px;
}
#completed-questions .text p{
  text-decoration: line-through;
}
.question-panel {
    display: inline-block;
  padding: 8px;
    width: 250px;
  vertical-align: top;
    background-color: #fff;
    border-radius: 3px;
}
.question-name.over ~ .text-list {
  border: 3px dashed #dadada;
}
.toolbar {
  text-align: right;
  line-height: 30px;
  padding: 0px 6px;
  display: none;
}
.toolbar a {

}
.text-list {
  position: relative;
  margin: 4px 0px 0px 0px;
}
.text{
  position: relative;
    background-color: #eaeaea;
    text-align: left;
  padding: 0px 0px 0px 4px;
  margin: 0px 0px 1px 0px;
  border: 1px solid #dadada;
  border-width: 1px 1px 0px 1px;
}
.text:first-child{

}
.text:last-child{
  border-width: 1px;

}
.text > p {
  color: lighten(#333, 30%);
  margin: 0;
  padding: 0;
  line-height: 30px;
  display: inline-block;
  width: 90%;
  vertical-align: top;
}
.actions {
  position: absolute;
  display: inline-block;
  padding: 0px;
  margin: 0px -200px 0 0;
  width: 19px;
  height: 22px;
  z-index: 10;
  overflow: hidden;
  background-color: #fff;
  opacity: 0.5;
  transition: all 0.75s ease-in-out;
}
.actions:hover{
  width: 150px;
  opacity: 1;
}
.actions a {
  padding: 0px 10px;
}
.actions a.icon-caret-right {

}
.text.over {
  border-top: 3px dashed #dadada;
}

/*
 *  END DG-QUESTIONS
 */

JavaScript

;(function ( $, window, undefined ) {
  var pluginName = 'dragDrop',
      document = window.document,
      defaults = {
          draggableSelector: ".draggable",
          droppableSelector: ".droppable",
          appendToSelector: false
      };


  function Plugin( element, options ) {
      this.element = element;
      this.options = $.extend( {}, defaults, options) ;

      this._defaults = defaults;
      this._name = pluginName;

      this.init();
  }

  Plugin.prototype.init = function () {
      var droppables = $(this.element).find(this.options.droppableSelector);
      var draggables = $(this.element).find(this.options.draggableSelector).attr("draggable", "true");

    if(this.options.appendToSelector){
      var appendables = $(this.options.appendToSelector);

      appendables.on({
        'dragenter': function(ev){
          ev.preventDefault();
          return true;
        },
        'drop': function(ev){
          var data = ev.originalEvent.dataTransfer.getData("Text");
          var draggedEl = document.getElementById(data);
          var destinationEl = $(ev.target);

          destinationEl = destinationEl.closest(appendables.selector).siblings(droppables.selector).append(draggedEl);
          $('.active').removeClass('active');
          $('.over').removeClass('over');
          ev.stopPropagation();
          return false;
        },
        'dragover': function(ev){
          ev.preventDefault();
          $(ev.target).closest(appendables.selector).addClass('over');
          return true;
        },
        'dragleave': function(ev){
          ev.preventDefault();
          $(ev.target).closest(appendables.selector).removeClass('over');
          return true;
        }
      });
    }

    droppables.on({
      'mouseup': function(ev){
        $('.active').removeClass('active');
        return true;
      },
      'dragenter': function(ev){
        ev.preventDefault();
        return true;
      },
      'drop': function(ev){
        var data = ev.originalEvent.dataTransfer.getData("Text");
        var draggedEl = document.getElementById(data);
        var destinationEl = $(ev.target);

        destinationEl.closest(draggables.selector).before(draggedEl);
        $('.active').removeClass('active');
        $('.over').removeClass('over');
        ev.stopPropagation();
        return false;
      },
      'dragover': function(ev){
        ev.preventDefault();
        $(ev.target).closest(draggables.selector).addClass('over');
        return true;
      },
      'dragleave': function(ev){
        ev.preventDefault();
        $(ev.target).closest(draggables.selector).removeClass('over');
        return true;
      }
    });


    draggables.on({
      'mousedown': function(ev){
        $(ev.target).closest(draggables.selector).addClass('active');
        return true;
      },
      'mouseup': function(ev){
        $('.active').removeClass('active');
        return true;
      },
      'dragstart': function(ev){
        ev.originalEvent.dataTransfer.effectAllowed='move';
        ev.originalEvent.dataTransfer.setData("Text", ev.target.getAttribute('id'));
        ev.originalEvent.dataTransfer.setDragImage(ev.target,100,20);
        return true;
      },
      'dragend': function(ev){
        return true;
      }
    });

  };

  // A really lightweight plugin wrapper around the constructor, 
  // preventing against multiple instantiations
  $.fn[pluginName] = function ( options ) {
    return this.each(function () {
      if (!$.data(this, 'plugin_' + pluginName)) {
        $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
      }
    });
  }

}(jQuery, window));

$(document).ready(function(){
  $("#questions").dragDrop({
          draggableSelector: ".text",
          droppableSelector: ".text-list",
      appendToSelector: ".question-name"
    });
  $("a.icon-trash").on("click", function(){
    $(this).closest(".text").remove();
  });
  $("a.icon-ok").on("click", function(){
    $(this).closest(".text").appendTo("#completed-questions");
    $("#completed-questions").addClass('open');
  });
  $("a.icon-pencil").on("click", function(){
    var text = $(this).closest(".text");
    text.attr("draggable", "false");
    text.find("p").attr("contenteditable", "true").on({
        "keypress": function(ev){
          if(ev.keyCode == 13)
          {
            ev.preventDefault();
            $(this).attr("contenteditable", "false");
            text.attr("draggable", "true");
          }
        },
        "focusout": function(ev){
          $(this).attr("contenteditable", "false");
            text.attr("draggable", "true");
        }
    }).focus();
  });
});

In Embedded Example both the User Sending Form sample are integrated, a second which is not complete and the example Drag and Drop Questions List , but it turns out that the first one is not aligned as such you can check the Partial Example , where it is well aligned.

Partial Example

In the Partial Example , as you can see, the table behaves in an aligned way, however so I integrate the same in the Integrated Example this gets misaligned.

This happens because, in this case, I'm using a different style hierarchy because I'm defining:

*{
     color:#333;
     padding:0px;
     margin:0px;
     border:0;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box; box-sizing: border-box;
 }

What I can not do the same in Integrated Example because I would define all styles (aka <div> ) and it's something I do not want.

My question is:

How can I solve this problem?

That is, I want to have the style:

*{
     color:#333;
     padding:0px;
     margin:0px;
     border:0;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box; box-sizing: border-box;
 }

But only for my * with all tables aligned.