JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<ul>
    <li class="container">
    <span class="left"><img src="http://lorempixel.com/output/technics-h-c-141-154-6.jpg" alt="" /></span>
    <h3>Sans clearing</h3>
    <p>Premier problème : l'élément n'est pas remis dans le flux, du coup le fond gris ne suit pas.
    </p>
    <div class="abs">position:absolute;</div>
</li>

<li class="container">
    <span class="left"><img src="http://lorempixel.com/output/technics-h-c-141-154-6.jpg" alt="" /></span>
    <h3>Avec clear sur un br</h3>
    <p>Cela devrait fonctionner sans problèmes. Sauf sur Chrome et Firefox qui ajoute un espace fantome.</p>
    <div class="abs">position:absolute;</div>
    <br class="clear" />
</li>

<li class="container">
     <span class="left"><img src="http://lorempixel.com/output/technics-h-c-141-154-6.jpg" alt="" /></span>
    <h3>16px de haut</h3>
    <p>16px de haut + margin-bottom:70px; = 102px en tout</p>
    <div class="abs">position:absolute;</div>
    <br class="clear clear-ff" />
</li>

<li class="container clear-chrome">
     <span class="left"><img src="http://lorempixel.com/output/technics-h-c-141-154-6.jpg" alt="" /></span>
     <h3>16px de haut</h3>
    <p>16px de haut + margin-bottom:70px; = 102px en tout</p>
    <div class="abs">position:absolute;</div>
    <br class="clear clear-ff" />
</li>
</ul>

CSS

body {font-family:Arial; font-size:12px;}
.container {background:lightgray; border:blue; padding:5px; margin:10px; line-height:16px; position:relative; width:280px;}
.container:after {}
.left {float:left; background:firebrick; color:white; display:inline-block; text-align:center; margin:0 10px 0 0; position:relative; z-index:2; padding:0 10px 0 0; }
.left img {vertical-align:bottom;}
.abs {position:absolute; right:5px; bottom:5px; background:lightblue; width:270px; padding:5px; text-align:right;}
h3 {font-weight:bold; margin:5px 0; font-size:16px;}
p {/*height:60px;*/ margin:0 0 30px; line-height:14px;}
.clear { clear:both; line-height:0; height:0; font-size:0; }

.clear-ff {display:block;}
.clear-chrome {line-height:0;}
.clear-chrome h3, .clear-chrome p, .clear-chrome .left {line-height:16px;}