Chrome列中的三列布局无法正确显示

Question

我正在尝试在ASP.NET网站的一个div中实现三列布局，但它只能在Firefox中正确显示，Chrome会将它们显示在彼此之下。我有以下asp.net代码

#container {
  width: 1200px;
  margin: 0 auto;
}
#left {
  width: 400px;
  float: left;
}
#middle {
  width: 400px;
  float: left;
}
#right {
  width: 400px;
  float: left;
}

<form id="form1" runat="server">
  <div>
    <div id="container">
      <div id="left">
        <p>left column</p>
      </div>
      <div id="middle">
        <p>middle column</p>
      </div>
      <div id="right">
        <p>right column</p>
      </div>
    </div>
  </div>
</form>

任何帮助将不胜感激。