Floating div covers the next div - html

Question

I want to position a <div> on a line, and then another <div> afterward.
I set the first <div> to float left, and then put in the next one.
However, the first div is covering the second one. It's not positioning the second one after the first (as I expected) - it's starting it from the same place.
Here's the code (on JSFiddle: http://jsfiddle.net/LcrA9/)
<div id="container">
<div id="one">
</div>
<div id="two">
</div>
</div>
#container {
width: 300px;
height: 500px;
}
#one {
width: 100px;
height: 500px;
float: left;
background-color: green;
}
#two {
width: 200px;
height: 500px;
background-color: blue;
}

Answer 1

Float the second div, or put a margin-left equal to the first div's width:
Floating JSFiddle:
#two {
width: 200px;
height: 500px;
background-color: blue;
float: left;
}
Margin-left JSFiddle
#two {
width: 200px;
height: 500px;
background-color: blue;
margin-left: 100px;
}
#PlantTheIdea's suggestion to use display: inline-block is sound. This question does have a purpose though: when you want the second div to consume the remaining space (and don't want to use display: table e.g.)
Here's an example of that too:
#container {
height: 500px;
clear: both;
}
#one {
width: 100px;
height: 500px;
float: left;
background-color: green;
}
#two {
height: 500px;
background-color: blue;
margin-left: 100px;
}

Answer 2

You need to ditch the floats, and discover display:inline-block; my friend!
Your HTML:
<div id="container">
<div id="one">
</div><div id="two">
</div>
</div>
And your CSS:
#container {
width: 300px;
height: 500px;
}
#one,#two {
display:inline-block;
vertical-align:top;
/* Old IE */
*display:inline;
*zoom:1;
}
#one {
width: 100px;
height: 500px;
background-color: green;
}
#two {
width: 200px;
height: 500px;
background-color: blue;
}
Here is an updated jsFiddle.
The reason I eliminated the space between the two divs is because if there were any space, inline-block would put a 4px margin between them. The Old IE pieces are for IE7 and below.

Answer 3

You need float:left on both divs
#one {
width: 100px;
height: 500px;
float: left;
background-color: green;
}
#two {
width: 200px;
float:left;
height: 500px;
background-color: blue;
}
Fiddle

Answer 4

You could solve this by making the second div float as well:
#two {
float: left;
width: 200px;
height: 500px;
background-color: blue;
}

Answer 5

Float left the next one too!!
<div id="container">
<div id="one">
</div>
<div id="two">
</div>
</div>
#container {
width: 300px;
height: 500px;
}
#one {
width: 100px;
height: 500px;
float: left;
background-color: green;
}
#two {
width: 200px;
height: 500px;
background-color: blue;
float:left;
}

Answer 6

Just add another "float:left" value on second div.
#one {
width: 100px;
height: 500px;
float: left;
background-color: green;
}
#two {
width: 200px;
height: 500px;
background-color: blue;
float:left;
margin-left:20px
}
DEMO

Answer 7

Set The #two Div to float:left as well.