DIVs position (xhtml / css)

I have - I think - a very simple problem

I want to align 4 different DIVs like that :

AAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAA
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
           CCCCCCCCCCCC
           CCCCCCCCCCCC
DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD

The 4 DIVs are text only, with variable length

C is a "float: right;" DIV

To be sure to avoid overlap between C and D, D has a "clear: both;" instruction.

My problem : I have a big empty space at the top of D, like that :

AAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAA
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
           CCCCCCCCCCCC
           CCCCCCCCCCCC




DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD

and I do not understand why... someone can help me?

BTW, if I do not put the "clear: both;" instruction in the D DIV, I hav开发者_Python百科e an overlap :

AAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAA
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
BBBBBBBBBB CCCCCCCCCCCC
DDDDDDDDDD CCCCCCCCCCCC
DDDDDDDDDD CCCCCCCCCCCC
DDDDDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDDDDD

My CSS is pretty simple :

.A {
width: 200px;
}

.B {
width: 100px;
}

.C {
width: 100px;
float: right;
}

.D {
clear: both;
width: 200px;
}

How is this (ASCII and all)

http://jsfiddle.net/Mutant_Tractor/9z3ru/1/

CSS:

#wrap {
    width:200px;
}
#as {
    width:200px;;
    clear:both;
}
#bs {
    width:100px;
    float:left;
}
#cs {
    width:100px;
    float:right;
}
#ds {
    clear:both;
}

Slight change to how Myles did it. With the div with A's in it being full length as well.

http://jsfiddle.net/Q4xEG/2/