28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'utilise Knacss et je souhaiterais réaliser deux colonnes dont une colonne fixe (de 80px avec une icone) et une autre fluide (avec du texte). Comme l'image ci-dessous :
upload/22679-colonnes.jpg


<div class="row">

<div class="col w50">
<div class="col-icon debug"><img src="images/icon1.png"></div>
<div class="col-text debug"><h4>Vivamus congue diam</h4><h5>Aagittis</h5><p>Vivamus congue diam vitae tortor imperdiet congue. Nullam sagittis tristique diam, ut ullamcorper tellus. Cras porttitor</p></div>
</div>

<div class="col w50">
<div class="col-icon debug"><img src="images/icon2.png"></div>
<div class="col-text debug"><h4>Vivamus congue diam</h4><h5>Aagittis</h5><p>Vivamus congue diam vitae tortor imperdiet congue. Nullam sagittis tristique diam, ut ullamcorper tellus. Cras porttitor</p></div>
</div>

</div>



.col-icon {
    width: 80px;
    float: left;
}

.col-text {
    float: none;
    width: auto;
}


Avec mon code le texte épouse la forme de mon icone, il coule en dessous, alors que je voudrais deux colonnes distinctes.

Avez-vous une idée ?

Merci
Modifié par draklane (25 Jan 2015 - 23:15)
Merci pour cette réponse Raphael.

Comme quoi je me disais bien content de l'utiliser. C'est magique.

Vivement la prochaine version dont tu as parlé.