Floated and cleared blocks can take unusual and unexpected widths in Internet Explorer 7

Here is a <div> having float: left and clear: left. As expected, it takes, it occupies as much width it requires from the body's content area.

This is the same type of <div>: a left-floated <div> with clear: left. This <div> should use, should take, should occupy the whole content area of the body node (expected results). However, in Internet Explorer 7, this left-floated <div> with clear: left only takes, only occupies a very narrow chunk of the body's content area (actual results). More text filling. More text filling. More text filling. More text filling. More text filling.

Here, a third <div> having float: left and clear: left. Change your browser window viewport's width.