Three column layout breaks on adding d3js chart

Question

I am trying to create a three column layout with a header and footer. I started adding divs to my first and second columns. Built the page for first two columns. Everything looked great. But as soon as I add D3.js chart using dimplejs to my third column, my layout breaks. Not sure what does it do to break the other two columns.

Working Layout looks like:

When I add the chart, the layout breaks. https://i.stack.imgur.com/HcWp7.jpg

I have created a jsfiddle for explain what issue i am seeing.

You can consider me a newbie to d3js/dimplejs. I tried to investigate the layout, the divs and classes but couldn't figure out what am I missing. I noticed that the chart container seems to be somehow truncating too, as the y axis is not completely visible.

Any help would be appreciated.

Answer 1

正如@Temani Afif所说，我将vertical-align: top添加到我的班级.column，所有内容都神奇地起作用。

这是工作jsfiddle。