通过JS插入DOM元素时，根据子元素调整父Div的大小

Question

I have a GWT Application which uses the following DIV layout on its main Webpage:

<div id="mainContainer">
    <div id="applicationHeader">
        <div id="imageLoader"></div>
        <div id="applicationHeaderMain">
            <div id="logo"></div>
            <div id="banner"></div>
            <div id="menu"></div>
        </div>
    </div>
    <div id="applicationContainer"></div>
    <div id="applicationFooter"></div>    
</div>

Both the applicationHeader and the applicationContainer use the CSS-Command width:100%; to adapt their size to the Browser Dimensions. Inside the ApplicationContainer I have a TabPanel.

Now I have a Function which resizes some Elements in one of the Tabs, and occasionally the TabPanel will exceed the Total Width of the Browser then. The TabPanel itself will adapt properly to the Size of its Child, the mainContainer seems to do this as well, but the applicationHeader -DIV will keep its actual size altough its parent Element is resized.

How can I make the applicationHeader -DIV resize properly?

Answer 1

Without seeing a code example it will be hard to give you a definitive answer, but I'd take a look for the following circumstances.

1. The applicationHeader div has its css position property set to something other than the default (static). This could cause it to set its width to the full width of an element other than its direct parent.

2. The applicationHeader div has a parent element other than mainContainer. Perhaps some javascript is modifying the html structure dynamically and creating unexpected effects.

If you can provide more details I will try to help you out more.