Nested Div not fitting nicely into container Div

Question

I have a dojox chart (chartDiv) that gets created within another container div (panelContainer).

Even though I have the width and height of the chartDiv set to be 90%, it either introduces scroll bars into the chartDiv, or if I dtart altering the padding and margin settigns for the ChartDiv, it will spill outside of the parent container.

I know this is going to be a basic issue, but I have been playing with lots of different CSS settings but nothing seems to solve keeping the chartDiv within the confines of the panelContainer (taking up 95% of the space)

This fiddle might help you spot where I have gone wrong.

Answer 1

When you make a chart (or a dojox.gfx canvas) without width/height, it will try its best to determine its dimensions from the container you put it in. It can get confused though!

In your fiddle's case, #chart has a known width, because it's a block element and inherits its width from panelBG which is 100% of panelContainer's width.

The #chart div doesn't really have a height though, since a block element is 0px tall until you put something in it (or add some style to it). As a consequence, (I think) the chart simply assumes a height of some proportion to the width.

In your CSS, I see you have a #chartDiv rule with width and height 90%. I'm guessing you intended that to be #chart. That wouldn't actually have resolved the problem entirely though!

Assuming you changed that, the chart would now use 90%x90% as width/height, but if you try it, you'll see that the labels/axis are still positioned incorrectly.

Because you've floated the title container to the left, the chart container starts on the same "line" and tries to have its content "float" around the title container. This skews the axis labels out of place (green), while the actual chart (svg/canvas, pink) drops down below the title container.

To fix this, tell the chart container to stay clear of floats on both sides:

#chart {
    width: 90%;
    height: 90%;
    clear: both;
}

It isn't really necessary to float anything though, and setting the height to 90% isn't always ideal. I made a suggestion in an updated fiddle: http://fiddle.jshell.net/froden/WsrHs/4/ .

The differences are just that the title container is a div spanning across the top, while the chart container is absolutely positioned so that it fills whatever space is left underneath. You can then just set width/height on panelContainer.