CSS Span Float Left

css, css-float

Solution

Your classes in the html are capitals but not in the CSS?

EDIT:

.A { position: absolute; border: 1px solid blue; } 
.B, .C { float: left; border: 1px solid red; width: 100px; height: 20px; }
.C { height: 100px; }
.clear { clear: both; }

<div class="A">
    <span class="B"></span>
    <span class="C"></span>
    <span class="clear"></span>
</div>

Demo on JSFiddle

Problem

So I have a div and two spans: ``` <div class="A"> <span class="B"></span> <span class="C"></span> <span class="clear"></span> </div> ``` Assume that B and C has sufficient contents. The CSS snippet is: ``` .A { position: absolute; } /* I need this to be absolute */ .B, .C { float: left; } .clear { clear: both; } ``` But I keep getting the layout of the right image, while I want it to be like layout of first image (refer to image below) Please help me. And it would be better if you kindly explain a bit why do they happen and why is my code not working like I expected. How is float actually working. Thanks.

Original source