Geek asks and answers

CSS Span Float Left

So I have a div and two spans:

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

Suppose that B and C have sufficient content. CSS snippet:

.A { position: absolute; } /* I need this to be absolute */
.B, .C { float: left; }
.clear { clear: both; }

But I keep getting the layout of the correct image, while I want it to look like the layout of the first image (see image below) enter image description here

Please help me. And it would be better if you kindly explain why they occur, and why my code does not work, as I expected. How float works. Thank.

+3
source share
2 answers

Are your classes in html capitals, but not 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>
Run codeHide result

JSFiddle Demo

+8
source

The class is case sensitive, "a" is not "A"!

change your HTML:

<div class="a">
    <span class="b"></span>
    <span class="c"></span>
    <span class="clear"></span>
</div>

also, the float works depending on the width. Give the width for both b and c div ...

+2
source

More articles:


All Articles