Generated Div cause havoc

I'll try and be as adequate as I can describing this problem.

I'm developing a web-application in Vaadin (GWT-like framework) where I make use of modal windows for displaying tables and other information.

The modal windows are in varying sizes but I'd like to use the same CSS classes for all of them for obvious reasons. and therefore I specify size specific parameters outside the CSS and instead in the java code when the modal windows are created. Eg:

public class InventoryAssignSubscription extends Window {

   Panel mainPanel = Cf.panel(I18N.get("inventory.assignsubscription.single.header"));

   public void init(Object customer)    {

        setResizable(false);

        setModal(true);
        setWidth("730px");
        center();

        mainPanel.addStyleName("m2m-modalwindow-mainpanel");

However, I've discovered a problem.

When I create a Panel component holding all the content in the window its width will fill the content width of the window, but when I look at the markup generated through Firebug I see another component generated, a VerticalLayout inside the Panel that has another width than the Panel. I have no idea how it gets there. And the problem I get is that the VerticalLayout is too big and causes a horizontal scroll in the bottom of the Panel. This is how it looks in Firebug:

The only way I've found to work around this is by setting the max-width of all VerticalLayout's inside the Panel with the m2m-modalwindow-mainpanel CSS class name:

.v-panel-content-m2m-modalwindow-mainpanel .v-verticallayout {
    max-width: 1000px;
}

However, this will only work for ONE window, namely the one who's content is displayed in a 1000 pixel width. Windows who are slimmer will never have their VerticalLayout affected by this CSS class, since their width should be way below 1000px.... =(

Does anyone have an idea of how I can work around this..? Maybe somehow when I create the Panel I can tell it in some way what the components (div's) it "generates" should have 开发者_如何学JAVAas a max-width..?

If my problem is too vividly described or if you need more information to help me solve then please don't hesitate to ask!

Thank you!

EDIT: I've added CSS for the Panel padding and an image from Firebug showing the problem. There is a scroll in the bottom of the Panel that unfortunately doesn't show in the image..

CSS

.v-panel-content-m2m-modalwindow-mainpanel {
    padding: 15px;
}

Image:

Every Panel in Vaadin has a Vertical layout inside by default. The fact that you had set 730 to the Panel's width and the layout is only 704 pixels wide indicates that you have a margin in your panel. Try using the layout tab in Firebug to see what has caused the difference.

A whole lot of effort is put by Vaadin developers to get the sizing right and there shouldn't be anything without an explanation there.

It's a good idea to post your question to the Vaadin's forum.