jQuery offset breaks with float

by nwellcome

HTML

<html>
    <head></head>
    <body>
        <div id="A">
            <div id="B"></div>
            <div id="C"></div>
        </div>
        
    </body>
</html>

CSS

*, body, html {
    margin: 0px;
    padding: 0px;
}
#A {
    position: relative;
    top: 10px;
    left: 10px;
    width: 100px;
    height: 100px;
    background: red;
}

#B {
    background: blue;   
    width: 25px;
    height:  25px;
    position: absolute;
    top: 10px;
    left: 10px;
}

#C {
    float: right;
    width: 25px;
    height: 25px;
    background: green;
}

JavaScript

$(document).ready(function(){
    console.log("B left: " + $("#B").offset().left);
    console.log("B top: " + $("#B").offset().top);
    console.log("C left: " + $("#A").offset().left);
    console.log("C top: " + $("#A").offset().top);    
});