background color float alignment

Question

I have this code here https://jsfiddle.net/ Why isn't yellow color spread over all three elements? Considering all elements are inside the div tag.

<div id="whole">
<p id="p1">
header
</p>
<p id="p2">
paragraph
</p>
<p id="p3">
paragraph 2
</p>
</div>

css:

#whole{
  background:yellow;
}
#p1,#p2,#p3{
  float:left;
}