diff --git a/examples/form.json b/examples/form.json
index ce08866..d128590 100755
--- a/examples/form.json
+++ b/examples/form.json
@@ -1,19 +1,26 @@
 {
-  "type":"haxework.gui.GroupView",
+  "type":"haxework.gui.HGroupView",
   "layoutHAlign":"~haxework.gui.core.HAlign:CENTER",
   "layoutVAlign":"~haxework.gui.core.VAlign:MIDDLE",
+  "paddings":20,
+  "layoutMargin":100,
   "skin":{"type":"haxework.gui.skin.ColorSkin", "color":"0xff0000"},
   "views":[
     {
       "type":"haxework.gui.View",
-      "pWidth":70,
-      "pHeight":70,
+      "pWidth":100,
+      "pHeight":100,
+      "leftMargin":5,
+      "rightMargin":10,
       "skin":{"type":"haxework.gui.skin.ColorSkin", "color":"0x00ff00"}
     },
     {
       "type":"haxework.gui.View",
+      "vAlign":"~haxework.gui.core.VAlign:BOTTOM",
       "width":50,
       "height":50,
+      "leftMargin":5,
+      "rightMargin":10,
       "skin":{"type":"haxework.gui.skin.ColorSkin", "color":"0x0000ff"}
     }
   ]
diff --git a/haxework/gui/HGroupView.hx b/haxework/gui/HGroupView.hx
new file mode 100755
index 0000000..c75c8c3
--- /dev/null
+++ b/haxework/gui/HGroupView.hx
@@ -0,0 +1,10 @@
+package haxework.gui;
+
+import haxework.gui.layout.HorizontalLayout;
+
+class HGroupView extends GroupView {
+
+  public function new() {
+    super(new HorizontalLayout());
+  }
+}
diff --git a/haxework/gui/Root.hx b/haxework/gui/Root.hx
index 6a4a8aa..c0b32b5 100755
--- a/haxework/gui/Root.hx
+++ b/haxework/gui/Root.hx
@@ -8,7 +8,8 @@ import flash.events.Event;
 import flash.display.Sprite;
 
 //ToDo:
-import haxework.gui.GroupView;
+import haxework.gui.HGroupView;
+import haxework.gui.VGroupView;
 import haxework.gui.skin.ColorSkin;
 
 class Root {
diff --git a/haxework/gui/VGroupView.hx b/haxework/gui/VGroupView.hx
new file mode 100755
index 0000000..e37f486
--- /dev/null
+++ b/haxework/gui/VGroupView.hx
@@ -0,0 +1,10 @@
+package haxework.gui;
+
+import haxework.gui.layout.VerticalLayout;
+
+class VGroupView extends GroupView {
+
+  public function new() {
+    super(new VerticalLayout());
+  }
+}
diff --git a/haxework/gui/layout/DefaultLayout.hx b/haxework/gui/layout/DefaultLayout.hx
index 06538a4..a690674 100755
--- a/haxework/gui/layout/DefaultLayout.hx
+++ b/haxework/gui/layout/DefaultLayout.hx
@@ -12,18 +12,22 @@ class DefaultLayout implements ILayout {
 
   public function place(group:IGroupView<Dynamic>, views:Array<IView<Dynamic>>):Void {
     for (view in views) {
-      setViewSize(group, view);
+      setViewWidth(group, view);
+      setViewHeight(group, view);
       placeViewHorizontal(group, view);
       placeViewVertical(group, view);
     }
   }
 
-  private function setViewSize(group:IGroupView<Dynamic>, view:IView<Dynamic>):Void {
+  private function setViewWidth(group:IGroupView<Dynamic>, view:IView<Dynamic>):Void {
     if (view.widthType == SizeType.PERCENT) {
-      view.w = view.pWidth / 100 * group.width;
+      view.w = view.pWidth / 100 * (group.width - view.leftMargin - view.rightMargin - group.leftPadding - group.rightPadding);
     }
+  }
+
+  private function setViewHeight(group:IGroupView<Dynamic>, view:IView<Dynamic>):Void {
     if (view.heightType == SizeType.PERCENT) {
-      view.h = view.pHeight / 100 * group.height;
+      view.h = view.pHeight / 100 * (group.height - view.topMargin - view.bottomMargin - group.topPadding - group.bottomPadding);
     }
   }
 
diff --git a/haxework/gui/layout/HorizontalLayout.hx b/haxework/gui/layout/HorizontalLayout.hx
new file mode 100755
index 0000000..d5b15b4
--- /dev/null
+++ b/haxework/gui/layout/HorizontalLayout.hx
@@ -0,0 +1,32 @@
+package haxework.gui.layout;
+
+import haxework.gui.core.SizeType;
+
+class HorizontalLayout extends DefaultLayout {
+
+  public function new() {
+    super();
+  }
+
+  override public function place(group:IGroupView<Dynamic>, views:Array<IView<Dynamic>>):Void {
+    var fixedSize:Float = group.layoutMargin * (views.length - 1);
+    var leftSize:Float = group.width - group.leftPadding - group.rightPadding;
+
+    for (view in views) {
+      switch (view.widthType) {
+        case SizeType.NORMAL: fixedSize += (view.width + view.leftMargin + view.rightMargin);
+        case SizeType.PERCENT: leftSize -= (view.leftMargin + view.rightMargin);
+      }
+      setViewHeight(group, view);
+      placeViewVertical(group, view);
+    }
+
+    var x:Float = group.leftPadding;
+    leftSize -= fixedSize;
+    for (view in views) {
+      if (view.widthType == SizeType.PERCENT) view.w = view.pWidth / 100 * leftSize;
+      view.x = x + view.leftMargin;
+      x += (view.width + view.leftMargin + view.rightMargin + group.layoutMargin);
+    }
+  }
+}
diff --git a/haxework/gui/layout/VerticalLayout.hx b/haxework/gui/layout/VerticalLayout.hx
new file mode 100755
index 0000000..3bcea1e
--- /dev/null
+++ b/haxework/gui/layout/VerticalLayout.hx
@@ -0,0 +1,32 @@
+package haxework.gui.layout;
+
+import haxework.gui.core.SizeType;
+
+class VerticalLayout extends DefaultLayout {
+
+  public function new() {
+    super();
+  }
+
+  override public function place(group:IGroupView<Dynamic>, views:Array<IView<Dynamic>>):Void {
+    var fixedSize:Float = group.layoutMargin * (views.length - 1);
+    var leftSize:Float = group.height - group.topPadding - group.bottomPadding;
+
+    for (view in views) {
+      switch (view.heightType) {
+        case SizeType.NORMAL: fixedSize += (view.height + view.topMargin + view.bottomMargin);
+        case SizeType.PERCENT: leftSize -= (view.topMargin + view.bottomMargin);
+      }
+      setViewWidth(group, view);
+      placeViewHorizontal(group, view);
+    }
+
+    var y:Float = group.topPadding;
+    leftSize -= fixedSize;
+    for (view in views) {
+      if (view.heightType == SizeType.PERCENT) view.h = view.pHeight / 100 * leftSize;
+      view.y = y + view.topMargin;
+      y += (view.height + view.topMargin + view.bottomMargin + group.layoutMargin);
+    }
+  }
+}