css floatleft floatright

floatleft : image flottante gauche dans paragraphe

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mauris. Nunc commodo odio at ipsum. Nam lacinia tempor dui. Sed elit. Cras eu tellus ac turpis tristique aliquet. Pellentesque blandit lacinia nulla. Aenean bibendum dui eu arcu. Nam lacinia eros ac lectus. Sed id pede at lacus sagittis dapibus. Aliquam dui leo, tincidunt quis, varius eu, elementum vitae, velit. Nullam erat. Cras metus metus, porta porta, tincidunt vitae, gravida vel, quam. Proin sit amet sapien. Nullam sed lectus. Mauris vehicula cursus justo. Pellentesque rutrum, mi in lobortis euismod, libero magna bibendum dui, quis commodo dolor risus ac enim. Vivamus feugiat, sem eu ornare tristique, nisi erat posuere metus, quis venenatis dolor dolor at enim. Quisque vehicula venenatis nibh.
Ce paragraphe contient une image flottante à gauche... ça float Charlotte :
Div ou img avec class="floatleft"

Code Css :
.floatleft{
float: left;
padding: 1%;
margin-right: 2px;
margin-top: 2px;
width: 120px;
height: 90px;
}

---

floatright : image flottante droite dans paragraphe

Nullam erat. Cras metus metus, porta porta, tincidunt vitae, gravida vel, quam. Proin sit amet sapien. Nullam sed lectus. Mauris vehicula cursus justo. Pellentesque rutrum, mi in lobortis euismod, libero magna bibendum dui, quis commodo dolor risus ac enim. Vivamus feugiat, sem eu ornare tristique, nisi erat posuere metus, quis venenatis dolor dolor at enim. Quisque vehicula venenatis nibh.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mauris. Nunc commodo odio at ipsum. Nam lacinia tempor dui. Sed elit. Cras eu tellus ac turpis tristique aliquet. Pellentesque blandit lacinia nulla. Aenean bibendum dui eu arcu. Nam lacinia eros ac lectus. Sed id pede at lacus sagittis dapibus. Aliquam dui leo, tincidunt quis, varius eu, elementum vitae, velit. Nullam erat.
Ce paragraphe contient une image flottante à droite :
Div ou img avec class="floatright"

Code Css :
.floatright{
float: right;
padding: 2%;
margin-left: 2px;
margin-top: 2px;
width: 120px
height: 90px;
}

---

paragraphe entre images avec Clear: both;

Ce paragraphe contient une image flottante à droite et une image flottante à gauche. Or cela tombe plutôt bien puisqu'on veut faire glisser le texte entre les deux images.

Ce paragraphe en rouge a un "clear : both" et de ce fait se placera en dessous des deux images et pas au milieu.

p class="flux" pour le paragraphe, class="floatleft" pour image gauche, class="floatright" pour image droite.
.flux{clear: both;}
.floatleft{ float: left; padding: 2%; margin-top: 2px; margin-bottom: 2px; margin-right: 2px; width: 120px; height: 90px; }
.floatright{ float: right; padding: 2%; margin-top: 2px; margin-left: 2px; margin-bottom: 2px; width: 120px; height: 90px; }

---

Floatleft et tableau sans cellules

Il est tout à fait possible de faire croire au visiteur qu'il est en présence d'un tableau bien structuré... Que néni! fichtre ;-)
Ce n'est pas parce que le tableau n'a pas de cellules que vous êtes dispensé(es) de faire travailler les vôtres ! Meuh nan, j'déconne...
Nous appellerons ceci des vignettes. Les vignettes sont réalisables soit avec des <div>, soit avec des <p>.

Vignette et <p>

Code CSS : .floatleft{
width: 120px;
height: 90px;
float: left;
border: solid 1px #FF0000;
text-align: center;
margin: 10px;
}

Code HTML :
<p class="floatleft">vignette 01</p>
<p class="floatleft">vignette 02</p>
<p class="floatleft">vignette 03</p>
...

vignette 01

vignette 02

vignette 03

vignette 04

vignette 05

vignette 06

 

 

 

 

 

---

Vignette et <div>

Code CSS :
.vignettediv{
float: left;
width: 75px;
height: 50px;
padding: 6px;
margin: 5px;
border: 2px solid #FF0000;
text-align: center;
font-weight: bold;
}

Code HTML :
<div>
<div class="vignettediv">vignette 01</div>
<div class="vignettediv">vignette 02</div> ...</div>

 

 

 

---

---