Download this demo: float-clear-seq.zip, 22 KB
A sequence of "float clear" divs is followed by text (that is a sequence of paragraphs).
I want to have a text with floating divs (e.g. images) on both sides.
The problem: The div #4 does not goes right after the div #2, but follows the height of the div #1.
It seems to me that "clear: left" of the div #3 is the cause.
(See screenshots bellow.)
Lorem ipsum dolor sit amet consectetuer id pretium justo eros consequat. Tellus elit vitae euismod convallis Phasellus ante id ornare Sed nec. Duis eros porttitor magna congue consequat ligula nulla Morbi fames tincidunt. Sed malesuada cursus enim eget sed magnis diam pretium fermentum wisi. Semper Sed odio justo auctor orci magna enim pulvinar pulvinar et. Vitae facilisis et Vestibulum senectus libero Vestibulum eget.
Sed condimentum Donec nec nibh eu lacus nec Curabitur nulla hendrerit. Nam ridiculus auctor interdum Vestibulum rutrum orci habitant et Lorem eros. Risus aliquet eget pharetra nibh non eu quis Integer mauris Curabitur. Rutrum id malesuada libero Nam Curabitur Cras tempor lacinia Ut elit. Natoque lorem sagittis vitae nulla interdum enim Vestibulum facilisis facilisis accumsan. Nibh lorem a In convallis dignissim ac facilisis dictum.
Enim Maecenas et sociis condimentum dis Suspendisse et quis adipiscing dictumst. Malesuada libero enim sollicitudin vestibulum id vel orci interdum Duis tristique. Tincidunt velit ut eu est at vitae Lorem Nulla purus dapibus. Facilisi et Donec egestas Vestibulum mauris porttitor facilisis pretium Aenean purus. Feugiat Nulla purus non non malesuada auctor Sed.
Tellus nisl diam risus risus Vivamus pellentesque Lorem massa at dictumst. Orci Curabitur euismod eget vel eros tellus a pretium tincidunt ac. Laoreet auctor et tellus habitasse Vestibulum sollicitudin morbi Phasellus laoreet vel. Mollis Lorem purus justo montes Lorem facilisis magna eleifend euismod ante. Nonummy turpis nonummy elit auctor neque pulvinar In ipsum eros ut. Semper Quisque lacinia.
Accumsan nulla at wisi nibh neque dignissim sapien dui dapibus condimentum. Vel et Donec Sed lacus vel nunc laoreet leo venenatis tellus. Pharetra velit justo Lorem eu tempor pretium dapibus et eros vitae. Nisl tincidunt sit Curabitur cursus Lorem nulla Aenean velit vitae eu. Morbi odio elit id nunc tellus at Nulla fringilla velit Nulla. Laoreet sapien tincidunt vel amet Sed Aenean neque orci Lorem justo. Tincidunt nibh laoreet.
Semper ac nulla et eget facilisis Nulla vitae vitae dolor leo. Pede urna Lorem Donec Integer Vivamus tempus nec cursus facilisis pede. Ipsum tellus montes ut at Lorem nibh quam convallis facilisi semper. Tortor et tortor Maecenas nibh wisi nunc lacus pretium libero nonummy. Lobortis volutpat Aenean a Nam eget elit justo volutpat.
Ultrices Mauris tristique gravida Phasellus ornare ut pellentesque orci sociis elit. Aliquet vitae sed Donec Vivamus dictum interdum Morbi In et nibh. Tincidunt turpis sapien eget ut pretium Quisque facilisi tincidunt tincidunt Morbi. Non ornare consequat id quis vitae mauris nibh ac consequat tincidunt. Lacus mauris senectus morbi malesuada at platea porttitor tristique neque consectetuer. Augue Cum convallis tempus eu.
Dui consequat tincidunt laoreet dictum In sem ligula justo ligula porttitor. Malesuada et gravida tristique tempus mauris fringilla at Nunc et penatibus. Nam risus amet vel Vestibulum elit eros at turpis a sapien. Tortor id Sed feugiat Quisque ac et congue nunc nibh ipsum. Rutrum ut convallis sapien In Nam felis nibh tincidunt id facilisi. Eros Vivamus eget et.
Ac Aliquam orci Curabitur parturient justo pede hac Quisque lorem Vestibulum. Sit consectetuer ac justo cursus pellentesque ligula sit tortor eget ipsum. Et Nam enim id quis Vestibulum Phasellus justo felis nascetur urna. Vitae nisl id platea tincidunt orci leo metus interdum morbi natoque. Urna Vivamus Ut Curabitur Praesent ligula justo vel justo.
Sociis lorem tincidunt adipiscing mauris metus facilisis Phasellus eu ac fringilla. Fringilla elit nec elit ac vitae ipsum risus pretium purus Curabitur. Sed id semper mauris orci Vestibulum aliquet est tortor Nulla dui. Duis tempus pulvinar vitae laoreet semper et mollis fermentum ligula ut. Porta at laoreet consectetuer eleifend Nunc lacus consectetuer est.