Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>1 ou 2 colonnes</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css" media="screen"> .bloc1 { background-color: yellow; width: 400px; /* évite d'avoir du texte de 15 km pour ce test */ } .bloc1 + .bloc1 { /* on style le second .bloc1 et on le sépare visuellement du premier */ margin-top: 20px; border: 1px solid red; } .bloc1 div { display: table-cell; /* le truc important. Incompatible IE6, OK pour IE7, FF3, Saf4, Op9 */ } .bloc2 { background-color: pink; float: right; width: 300px; height: 200px; /* pourquoi ce height ? */ } .bloc3 { background-color: blue; min-height: 300px; /* juste pour l'exemple */ color: white; /* un peu moins illisible */ } </style> </head> <body> <div class="bloc1"> <div class="bloc2"> bloc2 lorem ipsum dolor sit amet </div> <div class="bloc3"> bloc3 qui cohabite avec un bloc flottant à droite<br />lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec leo arcu, iaculis at, ultricies et, porta eget, urna. Nulla facilisi. Praesent ac risus at nulla fermentum condimentum. Integer odio massa, vulputate id, suscipit non, mattis sed, nibh. Suspendisse sollicitudin egestas nunc. Proin non risus. </div> </div> <div class="bloc1"> <div class="bloc3"> bloc3BIS : garanti sans bloc2<br /> lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec leo arcu, iaculis at, ultricies et, porta eget, urna. Nulla facilisi. Praesent ac risus at nulla fermentum condimentum. Integer odio massa, vulputate id, suscipit non, mattis sed, nibh. Suspendisse sollicitudin egestas nunc. Proin non risus. </div> </div> </body> </html>
|