background preloader

A new micro clearfix hack

A new micro clearfix hack
The clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required. Demo: Micro clearfix hack Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+ The “micro clearfix” method is suitable for modern browsers and builds upon Thierry Koblentz’s “clearfix reloaded”, which introduced the use of both the :before and :after pseudo-elements. Here is the updated code (I’ve used a shorter class name too): This “micro clearfix” generates pseudo-elements and sets their display to table. Including the :before selector is not necessary to clear the floats, but it prevents top-margins from collapsing in modern browsers. It ensures visual consistency with other float containment techniques that create a new block formatting context, e.g., overflow:hiddenIt ensures visual consistency with IE 6/7 when zoom:1 is applied. Related:  Mise en page, agencement, Layout etcFLOAT

Force Element To Self-Clear its Children Share this: Ship custom analytics today with Keen.io. This will do you fine these days (IE 8 and up): Apply it to any parent element in which you need to clear the floats. You would use this instead of clearing the float with something like <br style="clear: both;" /> at the bottom of the parent (easy to forget, not handleable right in CSS, non-semantic) or using something like overflow: hidden; on the parent (you don't always want to hide overflow). Now for a bit of history! This was the original popular version, designed to support browsers as far back as it possibly could: There then was a bit of a cleaner version documented here by Jeff Starr, based on the fact that nobody uses IE for Mac, which is what the backslash hack was all about. Then it became popular to use "group" as a class name, which is nicer and more semantic (via Dan Cederholm). Of course, if you drop IE 6 or 7 support, remove the associated lines. Update May 18, 2011: Nicolas Gallagher again with the "micro" clearfix.

clearfix Reloaded + overflow:hidden Demystified clearfix and overflow:hidden may be the two most popular techniques to clear floats without structural markup. This short article is about enhancing the first method and shedding some light on the real meaning of the second. clearfix In everything you know about clearfix is wrong I explain the issues this method creates across browsers and I suggest to only use clearfix on elements that are not next to floats (e.g. a modal window), although as authors we still have to deal with collapsing margins. Margin-collapse behavior in the first two boxes shows that it is the generated (non-empty) content that keeps the bottom margin inside the box (which makes perfect sense according to spec). So, to create the same box layout across browsers we can enhance the original method by generating content using both pseudo-elements :before and :after: overflow 10.1 Definition of "containing block": 4. You can check this demo page to see how things work. Better alternatives Further reading

clearfix Reloaded + overflow:hidden Demystified clearfix and overflow:hidden may be the two most popular techniques to clear floats without structural markup. This short article is about enhancing the first method and shedding some light on the real meaning of the second. clearfix In everything you know about clearfix is wrong I explain the issues this method creates across browsers and I suggest to only use clearfix on elements that are not next to floats (e.g. a modal window), although as authors we still have to deal with collapsing margins. Margin-collapse behavior in the first two boxes shows that it is the generated (non-empty) content that keeps the bottom margin inside the box (which makes perfect sense according to spec). So, to create the same box layout across browsers we can enhance the original method by generating content using both pseudo-elements :before and :after: overflow 10.1 Definition of "containing block": 4. You can check this demo page to see how things work. Better alternatives Further reading

Better float containment in IE using CSS expressions Research into improving the cross-browser consistency of both the “clearfix” and “overflow:hidden” methods of containing floats. The aim is to work around several bugs in IE6 and IE7. This article introduces a new hack (with caveats) that can benefit the “clearfix” methods and the new block formatting context (NBFC) methods (e.g. using overflow:hidden) of containing floats. It’s one outcome of a collaboration between Nicolas Gallagher (that’s me) and Jonathan Neal. If you are not familiar with the history and underlying principles behind methods of containing floats, I recommend that you have a read of Easy clearing (2004), Everything you know about clearfix is wrong (2010), and Clearfix reloaded and overflow:hidden demystified (2010). Consistent float containment methods The code is show below and documented in this GitHub gist. Micro clearfix hack: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+ Overflow hack (NBFC): Firefox 2+, Safari 2+, Chrome, Opera 9+, IE 6+ The CSS expression

HasLayout et bugs de rendu dans Internet Explorer 6-7 Le HasLayout, dont vous avez sans doute entendu parler au détour d'un tutoriel ou sur un forum, est une spécificité du navigateur Internet Explorer pour Windows, qui affecte les versions 5 à 7 incluses. Il s'agit d'un mécanisme interne du moteur de rendu d'Internet Explorer. Le HasLayout intervient dans le positionnement des éléments et plus généralement dans le calcul de l'affichage des pages web. Bref, c'est une question de cuisine interne. Concrètement, qu'est-ce-que c'est? Les explications détaillées sur le HasLayout peuvent être trouvées dans l'article On Having Layout. On retiendra surtout que, pour Internet Explorer, tout élément d'une page HTML peut avoir deux états: soit il a le layout, soit il ne l'a pas. Mais qui a le layout? Un exemple de différence de rendu lié au layout Par défaut, les éléments flottants «dépassent» de leurs blocs parents. <p style="border: solid 2px red;"> Ce paragraphe n'a pas le "layout". On pourrait multiplier les exemples. Conférer le layout à un élément

html - What is a clearfix? width: 100%, tu es le Mal ! – La Tête dans le Flux La propriété CSS width est certainement celle qui porte le plus mal son nom. En effet, elle représente la taille de la composante de contenu uniquement, pas largeur de l’élément. A vrai dire, l’appellation content-width lui conviendrait parfaitement et serait bien moins source de problèmes, mais voilà, elle s’appelle bel et bien width, et c’est ça le drame. Il est dangereux de croire que width correspond à la largeur de l’élément puisque dès que des marges internes (paddings) ou bordures (border) y sont ajoutées, la taille totale de l’élément ne correspond plus du tout à width. Et c’est d’autant plus problématique que l’on voit pulluler partout des width: 100%… ce qui crée potentiellement des éléments qui déborderont joyeusement de leur parent dès lors que le moindre padding ou la moindre bordure seront appliqués. C’est tout. Dans la grande majorité des cas, on peut aisément se passer de width: 100% Vos éléments sont des blocks (div, p, h1, ul, etc.) ?

All About Floats By Chris Coyier On What is "Float"? Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them. Setting the float on an element with CSS happens like this: There are four valid values for the float property. What are floats used for? Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts. Floats are also helpful for layout in smaller instances. This same layout could be accomplished using relative positioning on container and absolute positioning on the avatar as well. Clearing the Float Float's sister property is clear. In the above example, the sidebar is floated to the right and is shorter than the main content area. The Great Collapse

Le point sur les grilles en CSS – La Tête dans le Flux Les grilles en CSS font souvent office de Saint Graal dans nos maquettes : toujours imitées, jamais égalées. Ou énoncé différemment : des fois ça marche, des fois ça marche pas. EDIT : à l’aube de 2016, cet article bénéficie d’une suite dans cette réflexion : « Grid Layout, vers la grille parfaite ». De très nombreux frameworks CSS proposent des solutions de grilles toutes plus sexy les unes que les autres, mais ont immanquablement recours à des hacks et des bidouilles multiples pour couvrir tous les cas de figure et bugs navigateurs. Tout simplement parce qu’en 2014, en 18 ans de CSS, il n’existe toujours pas de modèle de positionnement idéal pour la conception de grilles de mise en page. Faisons le point sur les solutions existantes, leurs avantages et limites, ainsi que sur les modules de positionnements que l’avenir nous réserve… The Grid ? Avant de choisir ou tenter de concevoir une grille CSS de mise en page, les critères suivants doivent être considérés : Gouttière ou pas gouttière ?

Le contexte de formatage block en CSS - Alsacreations Certaines spécifications CSS sont plus obscures que d'autres. Mais il est du devoir d'un intégrateur de les connaître pour être plus efficace dans son métier. Qui n'a jamais pesté contre des éléments flottants qui ne se comportent pas comme espéré ? Ces comportements, comme d'autres, sont décrits et expliqués au sein d'une spécification concernant le “Visual Formatting Model”, qui décrit globalement le concept de flux d’affichage, de boîtes et de modes de rendu visuel. Voyons comment déchiffrer cette ressource cruciale… Block et Inline sont sur un bateau (qui float) Pour commencer, la spécification chamboule nos croyances établies et nous apprend à distinguer les blocks… des blocks. Si vous pensiez qu’un élément block est simplement un élément qui possède la règle display: block, eh bien en fait, non, c’est un peu plus subtil que ça Mais c’est quoi un “contexte de formatage block” ? Des sortes de “super éléments” ? Démonstrations en image… 1- Débordement de flottants : 3- Fusion de marges :

Ce bon vieux tableau HTML – La Tête dans le Flux Hier, sur Twitter, j’ai conseillé d’utiliser des tableaux HTML pour de la mise en forme. Et je n’ai même pas honte. En 2011 déjà, lors d’un atelier Paris-Web, je vantais les mérites des tableaux HTML pour de l’habillage graphique. Au cours de cette présentation, je revenais point par point sur chacun des arguments anti-tableaux : Bref, l’idée globale de ma présentation était à cette époque de revenir sur le classique « les tableaux HTML, c’est le Mal absolu », tellement ancré dans nos esprits que l’on ne se pose même plus de questions. En 2015, avec toutes les techniques de positionnement actuels (inline-block, table-cell, flexbox, etc.), et avec tout le mal qu’on a pu dire des tableaux HTML, comment est-il encore possible que j’en parvienne à conseiller son usage ? Tout simplement parce que l’on m’a demandé comment réaliser ce type de gabarit, a priori très simple : Selon moi, le meilleur choix, aujourd’hui, est le tableau HTML. <table role="presentation"><!

Initiation au positionnement CSS : 2.position float La position float retire une boîte du flux normal pour la placer le plus à droite ou le plus gauche possible dans son conteneur. Comment l’utiliser dans une mise en page CSS ? Cet article fait suite à l'initiation au positionnement CSS : 1.Flux et position relative. Une boîte flottante est retirée du flux normal, et placée le plus à droite (float: right) ou le plus à gauche (float: left) possible dans son conteneur. Le contenu suivant cette boîte flottante s'écoule le long de celle-ci, dans l'espace laissé libre. Le fonctionnement des flottants Ajoutons aux styles précédents une règle de positionnement flottant à droite et une mesure de largeur (facultative, mais utile pour certains navigateurs) : En HTML: <p class="jaune">Une boîte jaune flottant</p><p class="verte">Une boîte verte doté d'un contenu plus long…</p> En CSS: Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 1 Première utilisation : une mise en page à deux colonnes En CSS : Et en HTML :

Related: