<!DOCTYPE html>
<style type="text/css">
    #container {
        font: 20px/1 Ahem;
        line-height: 20px;
        background-color: red;
        width: 40px;
        height: 40px;
        color: green;
    }
    #float {
        float: left;
        width: 20px;
        height: 40px;
        background: green;
    }
</style>
<body>
    <p>You should see a single green square. You should not see any red.</p>
    <div id="container">
        <div id="float"></div>
        <div id="text-margin">X</div>
        <div id="text">X</div>
    </div>
</body>