Why wont my divs float?

Why wont my divs float? Content1 and Content2 should sit side by side. What am I missing? I am sure that it is something simple. i am obviously very early on in this project, so no need to correct all the other crap :).

Here is my 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;
}

Here is my 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>

Answers


Because you wrote your id's wrong. The name of the ID must be excactly the same as the name in your css sheet. In html you have Content1 with an uppercase C while in your css you have content1 with a lowercase c. This same scenario you have with Content2(html) and content2(css).

Your html: (Wrong)

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

New html: (Right)

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

DEMO


Need Your Help

WSE 3.0 crashes when ClearHeaders is called

c# web-services wse3.0

I'm developing a client-server application in c# using WSE web-service. One of the things that the user can do is send jpg images to the server for backup via the web-service. Recently strange errors

Mongoose pass req object to middleware

javascript node.js mongodb mongoose

I am writing a middleware for mongoose that gets executed for every find object using pre query hook.