html - 为什么我的 div 不 float ？

Question

为什么我的 div 不 float ？ Content1 和 Content2 应该并排放置。我错过了什么？我确信这很简单。显然我在这个元素中还很早，所以不需要纠正所有其他废话:)。

这是我的CSS:

body {
    margin: 0;
    background-color: #cccccc;
}

#header {
    width: 100%;
    height:90px;
    background-color: #999999;
}

#container {
    margin-right: 20%;
    margin-left: 20%;
    width: 1000px;
}

#content1 {
    width: 300px;
    float: left;
}

#content2 {
    width: 405px;
    float: left;
}

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:90px;
   background-color: #999999;
}

这是我的 html:

<div id="header">
  My Personal Page
</div>

<div id="container">

<div id="Content1">
  <img src="http://localhost:8888/portrait.png" height="400">
</div>

<div id="Content2">
  <img src="http://localhost:8888/portrait.png" height="400">
</div>

</div>

<div id="footer">
  Copyright Information
</div>

Answer 1

因为你写错了你的id's。
ID 的名称必须与您的css 表中的名称完全相同。在 html 中，您的 Content1 带有大写的 C，而在您的 css 中，您的 content1 带有小写的 c。
这与您在 Content2(html) 和 content2(css) 中遇到的情况相同。

您的 html: (错误)

<div id="Content1"> && <div id="Content2">

新 html:(右)

<div id="content1"> && <div id="content2">

DEMO