Horizontal container is a "grouping" mechanism to group one or more elements horizontally.
You should set the positional properties only:
left
top
width and height are set automatically based on the child elements (total).
You add element by defining the +
sign. Example:
#D1
+ image { left = 50 top = 10 width = 60 height = 60 file = "center.png" }
For the element:
+ hbox {
left = 300
top = 50%+310
width = 20
height = 100
#D1
+ image { left = 50 top = 10 width = 60 height = 60 file = "center.png" }
#D2
+ image { left = 40 top = 20 width = 70 height = 70 file = "button_n.png" }
}
Notice the generated vertical box has:
That's all about vertical containers.