you need to float
only one of them, the other needs its layout triggered with overflow:hidden;
.
No margin
should be used.
to keep the non floatting li
standing on right
side, you can reset direction
on ul
and set it back on li
.
to go further to avoid gaps, you will unfortunately need to multiplicate selectors to test if so many of one kind stands ahead to apply the right negative margin-top. DEMO . this can be endless if ul
has hundreds of li
s :)