GWT layout problems

Question

I have such Layout structure: 1) First lays SimpleLayoutPanel main (green border) 2) I'd like to add DockLayoutPanel child to main (red border; 25px margins)

I have implemented this, but result, shown in attachment (.jpg), is strange for me. So, all red (top, left, right, bottom) borders of child should be inside main, but child panel shifts. How can I implement this logic in a right way? I have more complex ui structure with 3-4 level. And I also dont work without margins.

And here it is code and css:

SimpleLayoutPanel panel = new SimpleLayoutPanel();
panel.setStyleName("mainModulePanel");
SimpleLayoutPanel p = new SimpleLayoutPanel();
p.setStyleName("moduleBody");
panel.setWidget(p);
initWidget(panel);

//CSS    
.moduleBody {
/*width: 100%;
  height: 100%;*/
  margin:  0px;
  width: 100%;
  height: 100%;
  border: 3px solid red;
}

.mainModulePanel {
/*margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 5px;*/
  border: 3px solid green;
}

Answer 1

This has to do with the html definition for the border!

Let me explain it with an example.

Your DockLayoutPanel is 500x500px. You put a child element with 100x100% into it, where the margin, padding and border are 0px. Your element will have a size of 500x500px. No you give it border of 3px. This means that to the height and width 3px are added. So your element has a size of 506x506px. The overflow is ignored.

The result is your second picture.

This is correct html behavior and has nothing to do with GWT!

Answer 2

I've solved the problem by removing 100% height and width .moduleBody CSS. So, to avoid such situation u shouldn't size child element by 100% height and width. Thanks guys!