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 have 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/
#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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.