CSS - Calc alternative

Question

J'ai développé un code qui fonctionne parfaitement bien, mais comme j'ai utilisé la fonction calc, certains navigateurs ne le supportent pas. Je n'ai aucune idée d'utiliser une alternative à cela.

J'ai vu quelques réponses et j'ai également essayé d'utiliser des positions absolues relatives. Cependant, aucun d'eux n'a travaillé pour mon scénario.

Mon code:

HTML:

<div class="row"> 
    <img height="35" width="35" class="img left" /> 
    <div class="title left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices orci mauris, sit amet luctus enim sodales id.</div> 
    <div class="right"> 
     <div class="type"></div> 
    </div> 
    <div class="clr"></div> 
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices orci mauris.</div> 
</div> 

CSS:

.title{width:calc(100% - 50px);} // 35px of image + 5px margin + 10px of icon 

Voir Fiddle ici.

PS: Je ne veux qu'une solution CSS. En ce moment, comme je n'ai aucune solution j'utilise javascript pour ajuster la largeur.

Toute aide serait appréciée. Merci pour votre temps.

Answer 1

est ce que vous voulez Demo

.title { 
    margin:0 10px 0 40px; 
}