<!DOCTYPE html>
<html>
<head>
<title>Test Multiple Floats for a Single Line</title>
<style>
    div { width: 100px; height:30px; margin:0; padding:0; border:none; background-color: green;}
    .container { width:400px; }
    .left { float:left; }
    .a { float:right; }
    .b { float:right; }
    .middle { display:inline-block; }
</style>
</head>
<body>
<p> There should be a single green rectangle below. </p>
<!-- No whitespace -->
<div class="container"><div class="left"></div><div class="middle"></div><div class="floater a"></div><div class="floater b"></div></div>

<!-- Some whitespace -->
<div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="floater a"></div>
    <div class="floater b"></div>
</div>

<!-- Order should not matter -->
<div class="container">
    <div class="floater a"></div>
    <div class="left"></div>
    <div class="middle"></div>
    <div class="floater b"></div>
</div>

</body>
</html>