Question

I am opening a popup window (inside it there is a div for displaying the chart)
When the maximize button is pressed the components are not aligned properly.

So for this i have read that we also need to have a parent container to solve the issue.

So i kept this way :

<div id="parent" style="margin:0 auto; width:1000px; position:relative;">

   <div id= "finance" style="position:absolute; top:10px; left:10px;"></div>

</div>

As a result of this , I am not able to increase the width of the div.

Please see the image here

My CSS is this

.centered {
    width:100%;
    height:100%; 
}
.html{ width:100%; height:100%; }
.body{ width:100%; height:100%; }

Please tell me how to solve this problem.

CSS Experts please help me.

Answer 1

Yor are referencing to .centered in your CSS and there’s no centered class in any div. Plus, style attributes have more relevance in the result than classes or even ids, so no matter what you put in your css, the div parent will always be 1000px.

Also, you didn’t say if you need the div to grow with the window, or just to be centered when the window is maximized.

You need to get rid of all the style attributes and reffer to those divs with their id’s in the css:

#parent {
    width: 1000px; /* or percentage if you want it to grow */
    margin: 0 auto;
}
#finance {
    margin: 10px;
}