Initiation au positionnement CSS : 2.position float - commentairesInitiation au positionnement CSS : 2.position float2018-07-12T14:08:03Zhttps://openweb.eu.org/articles/initiation_float#comment29712018-07-12T14:08:03Z<p>le float, c'est mort... on peut se passer du "float" grâce au flexbox (<a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" class="spip_url spip_out auto" rel="nofollow external">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a>)</p>Initiation au positionnement CSS : 2.position float2015-03-17T13:36:07Zhttps://openweb.eu.org/articles/initiation_float#comment26922015-03-17T13:36:07Z<p>pas mal cela peut nous aider</p>Initiation au positionnement CSS : 2.position float2014-07-28T14:28:59Zhttps://openweb.eu.org/articles/initiation_float#comment24892014-07-28T14:28:59Z<p>Bonjour,</p>
<p>Je pensais que le float ne retirais pas l'élement du flux de la page (comme c'est mentionné en début d'article). D'ailleurs, on voit bien que le texte et les blocs sont impactés par un élément en float. Je me trompe ?</p>Initiation au positionnement CSS : 2.position float2013-04-16T11:47:30Zhttps://openweb.eu.org/articles/initiation_float#comment15942013-04-16T11:47:30Z<p>Pour ma part, je trouve qu'ajouter une balise div vide en guise de spacer ou un hr fausse la sémantique de la page. Ce problème peut être résolu d'une façon très simple et bien plus propre : en mettant sur l'élément conteneur un overflow:hidden. Bien sûr dans quelques % des cas ça ne sera pas possible si votre conteneur doit avoir une propriété overflow différente. Mais celà est la solution la plus propre et couvre allez... 95% des cas.</p>Initiation au positionnement CSS : 2.position float2013-04-16T11:47:06Zhttps://openweb.eu.org/articles/initiation_float#comment15932013-04-16T11:47:06Z<p>Pour ma part, je trouve qu'ajouter une balise div vide en guise de spacer ou un hr fausse la sémantique de la page. Ce problème peut être résolu d'une façon très simple et bien plus propre : en mettant sur l'élément conteneur un overflow:hidden. Bien sûr dans quelques % des cas ça ne sera pas possible si votre conteneur doit avoir une propriété overflow différente. Mais celà est la solution la plus propre et couvre allez... 95% des cas.</p>Initiation au positionnement CSS : 2.position float2013-01-31T15:16:28Zhttps://openweb.eu.org/articles/initiation_float#comment14452013-01-31T15:16:28Z<p>bonjour, je cherche une astuce pour mettre deux colonnes à la même hauteur avec du css je ne trouve pas pouvez vous m'aider ?</p>Initiation au positionnement CSS : 2.position float2012-07-06T10:49:43Zhttps://openweb.eu.org/articles/initiation_float#comment7792012-07-06T10:49:43Z<p>jetman001, Une adresse Web avec un exemple concret du problème est toujours mieux pour pouvoir t'aider. Si tu ne veux/peux pas dévoiler tout le projet, tu peux créer un exemple sur <a href="http://jsfiddle.net/" class="spip_url spip_out auto" rel="nofollow external">http://jsfiddle.net/</a></p>Initiation au positionnement CSS : 2.position float2012-07-05T14:41:59Zhttps://openweb.eu.org/articles/initiation_float#comment7772012-07-05T14:41:59Z<p>Ce problème n'est pas lié au positionnement je pense. Peut-être devriez-vous plutôt poster votre problème sur un forum de discussion dédié où vous pourrez donner plus de détails.</p>
<p>Cependant, avez-vous vérifié le chemin de votre image ?</p>Initiation au positionnement CSS : 2.position float2012-07-05T14:11:54Zhttps://openweb.eu.org/articles/initiation_float#comment7762012-07-05T14:11:54Z<p>Bonjour, Quand je fais le test avec un image en contenu, ca me fais un grand vide là ou devrais se trouvé l'image par défaut.</p>Initiation au positionnement CSS : 2.position float2012-02-17T14:31:54Zhttps://openweb.eu.org/articles/initiation_float#comment6202012-02-17T14:31:54Z<p>Excellent article, bien écrit et facile pour les néophytes !</p>Initiation au positionnement CSS : 2.position float2011-10-21T21:32:56Zhttps://openweb.eu.org/articles/initiation_float#comment5412011-10-21T21:32:56Z<p>Une seul chose à dire. Je vous aimes \o/ <br class="autobr">
Je chercher a faire un cadre avec un beau style (donc 6 div pour le simple et seul fait du cadre) et quand j'arrivais a la deuxième ligne, tout merder.. Grâce a vous j'ai appris qu'il fallait mettre le clear:both dans une div entre la dernière div de la premiere ligne et la dernière div de la deuxième ligne :love :</p>Initiation au positionnement CSS : 2.position float2011-01-27T19:43:13Zhttps://openweb.eu.org/articles/initiation_float#comment3952011-01-27T19:43:13Z<p>D'expérience, c'est nécessaire pour que certains navigateurs la prennent en compte. Même en dehors du cas de figure de « float », j'ai eu à le faire pour que certaines de mes divisions fonctionnent avec IE. Je ne me souviens plus de la version.</p>
<p>Maintenant, le bug est peut-être résolu et on peut aussi choisir de faire un cut-off en dessous de certaines versions de navigateurs, histoire de favoriser la migration et, donc, l'adoption des bons standards.</p>Initiation au positionnement CSS : 2.position float2010-09-15T04:06:10Zhttps://openweb.eu.org/articles/initiation_float#comment3032010-09-15T04:06:10Z<p>Pourquoi générer un contenu dans le "spacer" ? C'est unutile (et pas besoin non plus de</p>
<hr> qui produit une ligne visible.
<p>La solution c'est (en HTML4 ou HTML5)</p>
<pre><div style="clear:both"></div></pre>
<p>sans rien du tout dedans.</p>
<p>Qu'on peut abréger en XHTML (attention pour HTML le div n'est pas fermé par cette syntaxe, si le navigateur emploie les règles de parsing SGML) :</p>
<pre><div style="clear:both"/></pre>
<p>(non recommandé)</p>
<p>Un div peut parfaitement être vide... Pas besoin de mettre une espace insécable dedans.</p>
<p>Voir par exemple sur Wikipédia le Modèle:Clear, abrégé souvent <strong>Clr</strong>, abondamment employé pour ça dans les articles. L'astuce est connue depuis longtemps.</p>
<p>Je trouve dommage que CSS ne contienne qu'une propriété "clear :" indiquant une rupture verticale uniquement AVANT le contenu de l'élement mais rien pour indiquer une rupture APRES ce contenu, juste avant la bordure et la marge inférieures. Ce qui aurait été logique par symétrie et aurait rendu la chose plus simple (mais on fait avec).</p>