Sigh… Sorry to say this to you Dimitri, but you can’t use that sort of CSS with our layouts.
The dimension calculations that the client side engine performs doesn’t take borders or margins into account when calculating the reserved space.
I see your “center_area” layout has 100% size. The calculated size is directly assigned to the root element of the layout, in the style attribute. So in your case, the border adds up to this size, making it 2 pixels too wide and high.
And add the margins to that, and your layout is actually 1px too low and 11px too far to the left, making the parent layout clip it 26px from the right and 2px from the bottom (including the left and right margins and borders).
The margin issue is easy to fix. Just use the built in margin support and write you CSS like this:
.center_area .i-horizontallayout-margin {
padding-top: 0;
padding-right: 15px;
padding-bottom: 0;
padding-left: 10px;
}
This doesn’t actually push the layout edges, it just reserves the needed margin space visually, by actually using paddings (easier to calculate since they’ll add up to offsetWidth/Height in the DOM). A picture would be worth a thousand words, but alas, I’m lazy.
For the border, there is currently no easy fix. I think we really need user input on this to know if this sort of thing needs to be supported. The fix is trivial to make into our code, but it could slow down the rendering a bit.
We’re currently updating our manual thoroughly, covering layout aspects as well. I’m hoping after this week people don’t need to resort to the forums so much when there is a problem.
A lengthy reply, again, but hopefully explains some of the issues you encountered.
Edit: the above CSS was a bit erraneous. Now corrected.
