HTML DIV不在父母div下

Question

我遇到了使用CSS创建3列而没有表的问题。我创建的3个<div>不在父<div>下。出于某种原因，我必须使用内联样式。以下是代码：

    <div id="wrapper" style="border:thin solid red;width:520px;margin:auto;">

     <div id="header" style="border:thin solid blue;position:relative;margin:auto;">

        <div id="left_header" style="border:thin solid yellow;float:left;width:105px;position:relative;">
            left header
        </div><!-- closing div tag id=left_header -->

        <div id="center_header" style="border:thin solid grey;float:left;width:50%;">
            center header
        </div><!-- closing div tag id=center_header -->

        <div id="right_header" style="border:thin solid black;float:right;width:120px;">
            right header
        </div><!-- closing div tag id=right_header -->

    </div><!-- closing div tag id=header -->

</div><!-- closing div tag id=wrapper -->

<div> left_header，center_header和right_header未位于div标头内。我在这里缺少什么？

请帮助我，我已经尝试解决这个问题，但我在网络开发方面还很新。我尝试将left_header和center_header以及absolute的相对定位用于right_header。它仍然没有解决问题。

注意： 该代码已在Chrome，Firefox和IE8上进行了测试。所有人都做同样的事情。

样品：

谢谢。

Answer 1

左浮动将起作用，但问题的解决方案是使用overflow:auto。这意味着您的div将调整大小以适应浮动的内容，但不会影响它自己的位置(fiddle)

Answer 2

在你的包装div [{3}}

中使用float：left

Answer 3

add float:left or overflow:auto; to header style

like
<div id="header" style="border:thin solid blue;position:relative;margin:auto;float:left;">