28172 sujets

CSS et mise en forme, CSS3

Probleme de comprehension des float

salut et merci pour ces super tutos ainsi que le livre de Raphael, très clair.
en passant a la pratique, je bute un petit peu :
je ne comprends pas pourquoi en disposant les 2 blocs div en float:left, ils n'apparaissent pas cote a cote ??




<head>
<style type="text/css">

div#bloc1 {
width:15em;
margin: 10px;
float:left;
background-color:#FF3FFF;
}

div#bloc2 {
margin: 10px;
padding-left:30px;
float:left;
background-color:#55FFAA;
}

</style>

<title>Document sans nom</title>
</head>

<body>
<div id="bloc1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum volutpat rhoncus est. Curabitur fringilla mi at mauris. Nunc congue, augue sed porttitor gravida, nibh sapien semper massa, a venenatis nisi dui vel dolor. Vivamus id nulla. Donec auctor. Donec vestibulum volutpat ante. Donec fermentum, massa ac tristique lobortis, felis neque semper magna, in venenatis dolor felis non sapien. Integer mauris. Suspendisse pharetra. Donec ante sapien, ullamcorper ut, molestie vehicula, interdum vel, eros. Sed blandit, libero et tristique commodo, lorem tellus tempus enim, quis posuere leo quam vel enim.</div>

<div id="bloc2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum volutpat rhoncus est. Curabitur fringilla mi at mauris. Nunc congue, augue sed porttitor gravida, nibh sapien semper massa, a venenatis nisi dui vel dolor. Vivamus id nulla. Donec auctor. Donec vestibulum volutpat ante. Donec fermentum, massa ac tristique lobortis, felis neque semper magna, in venenatis dolor felis non sapien. Integer mauris. Suspendisse pharetra. Donec ante sapien, ullamcorper ut, molestie vehicula, interdum vel, eros. Sed blandit, libero et tristique commodo, lorem tellus tempus enim, quis posuere leo quam vel enim.</div>
</body>
</html>

Modifié par vjbeng (19 May 2008 - 16:27)
Bonjour,

C'est parce qu'ils n'ont pas la place de se positionner l'un à côté de l'autre.

Ajoute leur un "width: 40%", et tu les verras se positionner l'un à côté de l'autre.

Edit : tu peux aussi laisser un seul en float avec une taille prédéfinie. Dans ce cas, ne mets pas le float à l'autre.
Modifié par SiDi (19 May 2008 - 06:42)
merci, ca fonctionne nickel !

Mais comment cela fonctionne-t-il ?
J'interprète probablement mal le code :

- le bloc 1 est en float left, il est poussé à gauche, et le bloc 2 se place à côté de lui, en prenant toute la largeur restante.

Qu'est ce que cela change que j'indique une largeur au bloc 2 ? (sans propriété Width sur le bloc2, celui ci devrait prendre toute la place restante = largeur de la fenetre - bloc 1- marges )

Edit : En fait, ma question se résume à : QUELLE est la largeur par défaut du bloc2 : la largeur de la fenêtre OU la largeur restante à droite du bloc 1 ?
Modifié par vjbeng (19 May 2008 - 16:30)
Bonjour et bienvenue parmi nous vjbeng! Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour,

La largeur par défaut d'un élement de type bloc est toujours de 100% du contenant. Celle-ci sera adaptée, plus ou moins au petit bonheur la chance, si deux éléments de type bloc doivent se partager un même espace horizontal - par exemple deux cellules de table, qui parfois se colleront depuis la gauche (Opera), parfois auront une taille proportionnelle à celle du contenu (Firefox, etc).

Il faut donc considérer une restriction de cette largeur pour bien utiliser ces flottants, sans oublier que les marges intérieures et extérieures, et les bordures, et aussi les bugs IE6, prennent de la place aussi. Je te recommande l'usage des unités de mesure '%' et 'em', dans la mesure du possible, pour éviter de 'rigidifier' ton site.

Cordialement, SD.
ok, maintenant je comprends la réponse de ce matin. Le bloc2 occupant par défaut 100% de la largeur du conteneur, il est trop grand pour venir se placer à côté du bloc1. C'est clair, merci.

-----------

Je me permets une question subsidiaire :

si je laisse mon bloc2 dans le flux :



#bloc1 {
width:30%;
margin: 10px;
float:left;
background-color:#FF3FFF;
}

#bloc2 {
margin: 10px;
padding-left:30px;
width=25%;
background-color:#55FFAA;
}


Le bloc2, dans le flux, n'entoure pas le bloc1 si il n'a pas une largeur supérieure a celle du bloc1. Pourquoi ? Smiley bawling
Bonsoir,

Je ne suis pas expert en flottants, mais je dirais qu'un bloc non flottant ne "partagera" son espace avec un flottant que s'il ne peut pas faire autrement, ie. si la largeur du bloc flottant et celle du bloc non flottant excèdent 100%. Sinon, ils se positionnent l'un à côté de l'autre, ou l'un après l'autre je ne sais plus trop.

Dans les tutoriels d'AlsacréationS, il y a des bons exemples. Si Florent passe par ici, il te donnera sans doute des détails plus précis que mes maigres explications !

Cordialement, SD.
voici deux illustrations du bloc1 flottant (rose), avec le bloc2 dans le flux (vert), mettant en évidence les variations de comportement du bloc 2 selon sa largeur :

upload/16730-float-flux.jpg

a droite, ca me parait normal, c'est ce que l'on cherche à réaliser, mais à gauche, je ne m'attendais pas à ca, je pensais plutot voir le bloc2 vert cote à cote du bloc1 rose... Des explications ?
Modifié par vjbeng (20 May 2008 - 00:49)
Hm...

Le comportement est normal. Dans les deux cas, le bloc2 se fond dans le bloc1, mais si le bloc1 a moins de largeur que le bloc2, alors il doit s'afficher en-dessous, la où le bloc2 lui laisse de la place.

Tu peux montrer le code HTML des deux blocs s'il te plait?

Cordialement, SD.
Bonjour !

Par rapport à ta réponse, c'est le bloc 2 en vert, qui se positionne en dessous.


<body>
<div id="bloc1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum volutpat rhoncus est. Curabitur fringilla mi at mauris. Nunc congue, augue sed porttitor gravida, nibh sapien semper massa, a venenatis nisi dui vel dolor. Vivamus id nulla. Donec auctor. Donec vestibulum volutpat ante. Donec fermentum, massa ac tristique lobortis, felis neque semper magna, in venenatis dolor felis non sapien. Integer mauris. Suspendisse pharetra. Donec ante sapien, ullamcorper ut, molestie vehicula, interdum vel, eros. Sed blandit, libero et tristique commodo, lorem tellus tempus enim, quis posuere leo quam vel enim.</div>

<div id="bloc2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum volutpat rhoncus est. Curabitur fringilla mi at mauris. Nunc congue, augue sed porttitor gravida, nibh sapien semper massa, a venenatis nisi dui vel dolor. Vivamus id nulla. Donec auctor. Donec vestibulum volutpat ante. Donec fermentum, massa ac tristique lobortis, felis neque semper magna, in venenatis dolor felis non sapien. Integer mauris. Suspendisse pharetra. Donec ante sapien, ullamcorper ut, molestie vehicula, interdum vel, eros. Sed blandit, libero et tristique commodo, lorem tellus tempus enim, quis posuere leo quam vel enim.</div>
</body>


et le CSS de la figure de gauche :


div#bloc1 {
width:30%;
margin: 10px;
float:left;
background-color:pink;
}

div#bloc2 {
margin: 10px;
width:25%;
background-color:green;
}
je tenterais cette explication :

- le bloc 2, dans le flux, non positionné, essaie par défaut de se placer en haut à gauche.
- Or, c'est impossible, le contenu est poussé par le flottant, vers le bas, comme l'aurait fait n'importe quel bloc non flottant, et non pas vers la droite.
- si le bloc 2 est plus large que le bloc1, il "remonte" sur le côté droit du bloc1.

ok avec ca ?
Sujet clos
Aller à