{"id":190,"date":"2017-09-15T16:42:16","date_gmt":"2017-09-15T14:42:16","guid":{"rendered":"http:\/\/www.raphaelle-lecot.fr\/blog\/?p=190"},"modified":"2025-03-26T12:00:22","modified_gmt":"2025-03-26T11:00:22","slug":"hauteur-colonnes-html-css","status":"publish","type":"post","link":"https:\/\/www.raphaelle-lecot.fr\/blog\/hauteur-colonnes-html-css\/","title":{"rendered":"Uniformisez la hauteur de vos colonnes en HTML et CSS"},"content":{"rendered":"\n[et_pb_section fb_built=\u00a0\u00bb1&Prime; admin_label=\u00a0\u00bbsection\u00a0\u00bb _builder_version=\u00a0\u00bb3.22&Prime;][et_pb_row admin_label=\u00a0\u00bbrow\u00a0\u00bb _builder_version=\u00a0\u00bb3.25&Prime; background_size=\u00a0\u00bbinitial\u00a0\u00bb background_position=\u00a0\u00bbtop_left\u00a0\u00bb background_repeat=\u00a0\u00bbrepeat\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb3.25&Prime; custom_padding=\u00a0\u00bb|||\u00a0\u00bb custom_padding__hover=\u00a0\u00bb|||\u00a0\u00bb][et_pb_text admin_label=\u00a0\u00bbText\u00a0\u00bb _builder_version=\u00a0\u00bb4.0.7&Prime; background_size=\u00a0\u00bbinitial\u00a0\u00bb background_position=\u00a0\u00bbtop_left\u00a0\u00bb background_repeat=\u00a0\u00bbrepeat\u00a0\u00bb hover_enabled=\u00a0\u00bb0&Prime;]<p style=\"text-align: justify;\">Un probl\u00e8me est souvent rencontr\u00e9 lorsqu&rsquo;on dispose de plusieurs colonnes sur une m\u00eame ligne : elles ont des hauteurs diff\u00e9rentes et cela peut donner un effet disgracieux. En effet, les colonnes ont une <strong>hauteur qui est ajust\u00e9e en fonction des \u00e9l\u00e9ments qu&rsquo;elles contiennent<\/strong>.<\/p>\n<p style=\"text-align: justify;\">Malheureusement, il n&rsquo;existe pas de mani\u00e8re universelle permettant de r\u00e9soudre ce probl\u00e8me. Tout d\u00e9pendra de la mani\u00e8re dont est construite notre page, donc de code HTML ou m\u00eame CSS. Cette difficult\u00e9 peut \u00e9galement \u00eatre rencontr\u00e9e avec le CMS WordPress. Les Divi Builder, Visual Composer ou tout autre outil de mise en page ne g\u00e8rent pas tous les blocs de la m\u00eame fa\u00e7on ce qui n&#8217;emp\u00eache donc pas d&rsquo;\u00eatre malgr\u00e9 tout un jour confront\u00e9 \u00e0 ce probl\u00e8me.<\/p>\nDans cet article nous aborderons 3 m\u00e9thodes diff\u00e9rentes:\n<ul>\n\t<li>l&rsquo;ajout de <strong>marges \u00ab\u00a0masqu\u00e9es<\/strong>\u00a0\u00bb ;<\/li>\n\t<li>comportement des blocs comme un <strong>tableau<\/strong> ;<\/li>\n\t<li>l&rsquo;utilisation des <strong>flexbox<\/strong>.<\/li>\n<\/ul>\nA vous de trouver celle qui vous conviendra !\n<h2>Ajouter des margin \/ padding<\/h2>\n<p style=\"text-align: justify;\">La premi\u00e8re solution consiste \u00e0 <strong>ajouter au bas des colonnes une marge n\u00e9gative coupl\u00e9e \u00e0 un padding positif<\/strong> (valeurs oppos\u00e9es). Les colonnes vont ainsi \u00eatre \u00ab\u00a0prolong\u00e9es\u00a0\u00bb vers le bas. Il n&rsquo;y aura ensuite plus qu&rsquo;\u00e0 restreindre le contenu \u00e0 la rang\u00e9e, pour cela on va cacher le background qui d\u00e9borde avec la propri\u00e9t\u00e9 CSS <code>overflow<\/code>.<\/p>\n\n<code>.row{\n   overflow:hidden;\n}\n.column-1,\n.column-2,\n.column-3{\n   margin-bottom: -9999px;\n   padding-bottom: 9999px;\n}<\/code>\n<p style=\"text-align: justify;\">Cette solution pr\u00e9sente l&rsquo;ind\u00e9niable avantage de ne pas briser le design \u00ab\u00a0responsive\u00a0\u00bb de la page lorsque l&rsquo;on passera \u00e0 des \u00e9crans de taille diff\u00e9rente.<\/p>\n\n<h2>Comportement similaire \u00e0 un tableau<\/h2>\n<p style=\"text-align: justify;\">Il est \u00e9galement possible de <strong>modifier le comportement de la ligne<\/strong> en affectant la valeur <code>table<\/code> \u00e0 la propri\u00e9t\u00e9 <code>display<\/code>. Le colonnes vont se comporter comme les cellules d&rsquo;un tableau gr\u00e2ce \u00e0 la valeur <code>table-cell<\/code>.<\/p>\n\n<code>.row{\n   display:table;\n}\n.column-1,\n.column-2,\n.column-3{\n   float:none;\n   display:table-cell;\n\u00a0  vertical-align:top;\n}<\/code>\n<p style=\"text-align: justify;\">Pour que cette solution fonctionne, il est indispensable d&rsquo;aligner les blocs par le haut (avec la propri\u00e9t\u00e9 <code>vertical-align:top<\/code>), et \u00e9galement annuler la propri\u00e9t\u00e9 <code>float<\/code> des colonnes.<\/p>\n<p style=\"text-align: justify;\">N\u00e9anmoins,cette m\u00e9thode n&rsquo;est pas \u00ab\u00a0responsive\u00a0\u00bb. Elle risque de provoquer un probl\u00e8me d&rsquo;affichage sur les \u00e9crans de petite taille. Pensez \u00e0 utiliser les media-queries pour \u00e9viter cela.<\/p>\n\n<h2>Utilisation des flexbox<\/h2>\n<p style=\"text-align: justify;\">Une alternative int\u00e9ressante pour r\u00e9soudre ce probl\u00e8me d&rsquo;alignement de colonnes est le <strong>mod\u00e8le de bo\u00eetes flexibles<\/strong>. L&rsquo;utilisation de la seule d\u00e9claration.<code>display:flex<\/code> appliqu\u00e9e \u00e0 la rang\u00e9e suffit.<\/p>\n\n<code>.row{\n\u00a0\u00a0\u00a0 display: -webkit-flex;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display:flex;\n}<\/code>\n<p style=\"text-align: justify;\">Aujourd&rsquo;hui, les <em>flexbox<\/em> sont plut\u00f4t bien reconnues par les navigateurs (ressource <a href=\"http:\/\/caniuse.com\/#search=flex\" target=\"_blank\" rel=\"noopener noreferrer\">CanIUse.com<\/a>). Toutefois, pensez bien \u00e0 ajouter les pr\u00e9fixes vendeurs pour \u00eatre compatibles avec le plus de versions de navigateurs possibles. Signalons malgr\u00e9 tout que les versions ant\u00e9rieures \u00e0 Internet Explorer 10 ne le supportent pas.<\/p>\n&nbsp;[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]\n","protected":false},"excerpt":{"rendered":"<p>Un probl\u00e8me est souvent rencontr\u00e9 lorsqu&rsquo;on dispose de plusieurs colonnes sur une m\u00eame ligne : elles ont des hauteurs diff\u00e9rentes et cela peut donner un effet disgracieux. En effet, les colonnes ont une hauteur qui est ajust\u00e9e en fonction des \u00e9l\u00e9ments qu&rsquo;elles contiennent. Malheureusement, il n&rsquo;existe pas de mani\u00e8re universelle permettant de r\u00e9soudre ce probl\u00e8me. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":868,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"<p style=\"text-align: justify;\">Un probl\u00e8me est souvent rencontr\u00e9 lorsqu'on dispose de plusieurs colonnes sur une m\u00eame ligne : elles ont des hauteurs diff\u00e9rentes et cela peut donner un effet disgracieux. En effet, les colonnes ont une <strong>hauteur qui est ajust\u00e9e en fonction des \u00e9l\u00e9ments qu'elles contiennent<\/strong>.<\/p>\n<p style=\"text-align: justify;\">Malheureusement, il n'existe pas de mani\u00e8re universelle permettant de r\u00e9soudre ce probl\u00e8me. Tout d\u00e9pendra de la mani\u00e8re dont est construite notre page, donc de code HTML ou m\u00eame CSS. Cette difficult\u00e9 peut \u00e9galement \u00eatre rencontr\u00e9e avec le CMS WordPress. Les Divi Builder, Visual Composer ou tout autre outil de mise en page ne g\u00e8rent pas tous les blocs de la m\u00eame fa\u00e7on ce qui n'emp\u00eache donc pas d'\u00eatre malgr\u00e9 tout un jour confront\u00e9 \u00e0 ce probl\u00e8me.<\/p>\nDans cet article nous aborderons 3 m\u00e9thodes diff\u00e9rentes:\n<ul>\n \t<li>l'ajout de <strong>marges \"masqu\u00e9es<\/strong>\" ;<\/li>\n \t<li>comportement des blocs comme un <strong>tableau<\/strong> ;<\/li>\n \t<li>l'utilisation des <strong>flexbox<\/strong>.<\/li>\n<\/ul>\nA vous de trouver celle qui vous conviendra !\n<h2>Ajouter des margin \/ padding<\/h2>\n<p style=\"text-align: justify;\">La premi\u00e8re solution consiste \u00e0 <strong>ajouter au bas des colonnes une marge n\u00e9gative coupl\u00e9e \u00e0 un padding positif<\/strong> (valeurs oppos\u00e9es). Les colonnes vont ainsi \u00eatre \"prolong\u00e9es\" vers le bas. Il n'y aura ensuite plus qu'\u00e0 restreindre le contenu \u00e0 la rang\u00e9e, pour cela on va cacher le background qui d\u00e9borde avec la propri\u00e9t\u00e9 CSS <code>overflow<\/code>.<\/p>\n<pre>.row{\n   overflow:hidden;\n}\n.column-1,\n.column-2,\n.column-3{\n   margin-bottom: -9999px;\n   padding-bottom: 9999px;\n}<\/pre>\n<p style=\"text-align: justify;\">Cette solution pr\u00e9sente l'ind\u00e9niable avantage de ne pas briser le design \"responsive\" de la page lorsque l'on passera \u00e0 des \u00e9crans de taille diff\u00e9rente.<\/p>\n<h2>Comportement similaire \u00e0 un tableau<\/h2>\n<p style=\"text-align: justify;\">Il est \u00e9galement possible de <strong>modifier le comportement de la ligne<\/strong> en affectant la valeur <code>table<\/code> \u00e0 la propri\u00e9t\u00e9 <code>display<\/code>. Le colonnes vont se comporter comme les cellules d'un tableau gr\u00e2ce \u00e0 la valeur <code>table-cell<\/code>.<\/p>\n<pre>.row{\n   display:table;\n}\n.column-1,\n.column-2,\n.column-3{\n   float:none;\n   display:table-cell;\n\u00a0  vertical-align:top;\n}<\/pre>\n<p style=\"text-align: justify;\">Pour que cette solution fonctionne, il est indispensable d'aligner les blocs par le haut (avec la propri\u00e9t\u00e9 <code>vertical-align:top<\/code>), et \u00e9galement annuler la propri\u00e9t\u00e9 <code>float<\/code> des colonnes.<\/p>\n<p style=\"text-align: justify;\">N\u00e9anmoins,cette m\u00e9thode n'est pas \"responsive\". Elle risque de provoquer un probl\u00e8me d'affichage sur les \u00e9crans de petite taille. Pensez \u00e0 utiliser les media-queries pour \u00e9viter cela.<\/p>\n<h2>Utilisation des flexbox<\/h2>\n<p style=\"text-align: justify;\">Une alternative int\u00e9ressante pour r\u00e9soudre ce probl\u00e8me d'alignement de colonnes est le <strong>mod\u00e8le de bo\u00eetes flexibles<\/strong>. L'utilisation de la seule d\u00e9claration.<code>display:flex<\/code> appliqu\u00e9e \u00e0 la rang\u00e9e suffit.<\/p>\n<pre>.row{\n\u00a0\u00a0\u00a0 display: -webkit-flex;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display:flex;\n}<\/pre>\n<p style=\"text-align: justify;\">Aujourd'hui, les <em>flexbox<\/em> sont plut\u00f4t bien reconnues par les navigateurs (ressource <a href=\"http:\/\/caniuse.com\/#search=flex\" target=\"_blank\" rel=\"noopener noreferrer\">CanIUse.com<\/a>). Toutefois, pensez bien \u00e0 ajouter les pr\u00e9fixes vendeurs pour \u00eatre compatibles avec le plus de versions de navigateurs possibles. Signalons malgr\u00e9 tout que les versions ant\u00e9rieures \u00e0 Internet Explorer 10 ne le supportent pas.<\/p>\n&nbsp;\n&nbsp;","_et_gb_content_width":"","footnotes":""},"categories":[2,6],"tags":[14,16,30],"class_list":["post-190","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","category-tous","tag-colonnes","tag-css","tag-mise-en-page"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Uniformisez la hauteur de vos colonnes en HTML et CSS : Guide pratique<\/title>\n<meta name=\"description\" content=\"Apprenez \u00e0 ajuster la hauteur des colonnes en HTML et CSS pour une mise en page plus soign\u00e9e et responsive.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.raphaelle-lecot.fr\/blog\/hauteur-colonnes-html-css\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Uniformisez la hauteur de vos colonnes en HTML et CSS : Guide pratique\" \/>\n<meta property=\"og:description\" content=\"Apprenez \u00e0 ajuster la hauteur des colonnes en HTML et CSS pour une mise en page plus soign\u00e9e et responsive.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.raphaelle-lecot.fr\/blog\/hauteur-colonnes-html-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Astuces, Notes et Techniques du Web\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-15T14:42:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-26T11:00:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2019\/11\/Probleme_de_colonnes_html_css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rapha\u00eblle L\u00e9cot\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rapha\u00eblle L\u00e9cot\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/hauteur-colonnes-html-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/hauteur-colonnes-html-css\\\/\"},\"author\":{\"name\":\"Rapha\u00eblle L\u00e9cot\",\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/#\\\/schema\\\/person\\\/cf1702a56eb8ac0ef5c22a850684c9c9\"},\"headline\":\"Uniformisez la hauteur de vos colonnes en HTML et CSS\",\"datePublished\":\"2017-09-15T14:42:16+00:00\",\"dateModified\":\"2025-03-26T11:00:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/hauteur-colonnes-html-css\\\/\"},\"wordCount\":527,\"image\":{\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/hauteur-colonnes-html-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Probleme_de_colonnes_html_css.jpg\",\"keywords\":[\"colonnes\",\"css\",\"Mise en page\"],\"articleSection\":[\"Code\",\"Tous\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/hauteur-colonnes-html-css\\\/\",\"url\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/hauteur-colonnes-html-css\\\/\",\"name\":\"Uniformisez la hauteur de vos colonnes en HTML et CSS : Guide pratique\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/hauteur-colonnes-html-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/hauteur-colonnes-html-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Probleme_de_colonnes_html_css.jpg\",\"datePublished\":\"2017-09-15T14:42:16+00:00\",\"dateModified\":\"2025-03-26T11:00:22+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/#\\\/schema\\\/person\\\/cf1702a56eb8ac0ef5c22a850684c9c9\"},\"description\":\"Apprenez \u00e0 ajuster la hauteur des colonnes en HTML et CSS pour une mise en page plus soign\u00e9e et responsive.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/hauteur-colonnes-html-css\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/hauteur-colonnes-html-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/hauteur-colonnes-html-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Probleme_de_colonnes_html_css.jpg\",\"contentUrl\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Probleme_de_colonnes_html_css.jpg\",\"width\":800,\"height\":410,\"caption\":\"Uniformiser la hauteur des colonnes en CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/hauteur-colonnes-html-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Uniformisez la hauteur de vos colonnes en HTML et CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/\",\"name\":\"Astuces, Notes et Techniques du Web\",\"description\":\"par Rapha\u00eblle L\u00e9cot\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/#\\\/schema\\\/person\\\/cf1702a56eb8ac0ef5c22a850684c9c9\",\"name\":\"Rapha\u00eblle L\u00e9cot\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Uniformisez la hauteur de vos colonnes en HTML et CSS : Guide pratique","description":"Apprenez \u00e0 ajuster la hauteur des colonnes en HTML et CSS pour une mise en page plus soign\u00e9e et responsive.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.raphaelle-lecot.fr\/blog\/hauteur-colonnes-html-css\/","og_locale":"fr_FR","og_type":"article","og_title":"Uniformisez la hauteur de vos colonnes en HTML et CSS : Guide pratique","og_description":"Apprenez \u00e0 ajuster la hauteur des colonnes en HTML et CSS pour une mise en page plus soign\u00e9e et responsive.","og_url":"https:\/\/www.raphaelle-lecot.fr\/blog\/hauteur-colonnes-html-css\/","og_site_name":"Astuces, Notes et Techniques du Web","article_published_time":"2017-09-15T14:42:16+00:00","article_modified_time":"2025-03-26T11:00:22+00:00","og_image":[{"width":800,"height":410,"url":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2019\/11\/Probleme_de_colonnes_html_css.jpg","type":"image\/jpeg"}],"author":"Rapha\u00eblle L\u00e9cot","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"Rapha\u00eblle L\u00e9cot","Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/hauteur-colonnes-html-css\/#article","isPartOf":{"@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/hauteur-colonnes-html-css\/"},"author":{"name":"Rapha\u00eblle L\u00e9cot","@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/#\/schema\/person\/cf1702a56eb8ac0ef5c22a850684c9c9"},"headline":"Uniformisez la hauteur de vos colonnes en HTML et CSS","datePublished":"2017-09-15T14:42:16+00:00","dateModified":"2025-03-26T11:00:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/hauteur-colonnes-html-css\/"},"wordCount":527,"image":{"@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/hauteur-colonnes-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2019\/11\/Probleme_de_colonnes_html_css.jpg","keywords":["colonnes","css","Mise en page"],"articleSection":["Code","Tous"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/hauteur-colonnes-html-css\/","url":"https:\/\/www.raphaelle-lecot.fr\/blog\/hauteur-colonnes-html-css\/","name":"Uniformisez la hauteur de vos colonnes en HTML et CSS : Guide pratique","isPartOf":{"@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/hauteur-colonnes-html-css\/#primaryimage"},"image":{"@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/hauteur-colonnes-html-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2019\/11\/Probleme_de_colonnes_html_css.jpg","datePublished":"2017-09-15T14:42:16+00:00","dateModified":"2025-03-26T11:00:22+00:00","author":{"@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/#\/schema\/person\/cf1702a56eb8ac0ef5c22a850684c9c9"},"description":"Apprenez \u00e0 ajuster la hauteur des colonnes en HTML et CSS pour une mise en page plus soign\u00e9e et responsive.","breadcrumb":{"@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/hauteur-colonnes-html-css\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.raphaelle-lecot.fr\/blog\/hauteur-colonnes-html-css\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/hauteur-colonnes-html-css\/#primaryimage","url":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2019\/11\/Probleme_de_colonnes_html_css.jpg","contentUrl":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2019\/11\/Probleme_de_colonnes_html_css.jpg","width":800,"height":410,"caption":"Uniformiser la hauteur des colonnes en CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/hauteur-colonnes-html-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.raphaelle-lecot.fr\/blog\/"},{"@type":"ListItem","position":2,"name":"Uniformisez la hauteur de vos colonnes en HTML et CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/#website","url":"https:\/\/www.raphaelle-lecot.fr\/blog\/","name":"Astuces, Notes et Techniques du Web","description":"par Rapha\u00eblle L\u00e9cot","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.raphaelle-lecot.fr\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/#\/schema\/person\/cf1702a56eb8ac0ef5c22a850684c9c9","name":"Rapha\u00eblle L\u00e9cot"}]}},"_links":{"self":[{"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/posts\/190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/comments?post=190"}],"version-history":[{"count":0,"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/posts\/190\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/media\/868"}],"wp:attachment":[{"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/media?parent=190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/categories?post=190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/tags?post=190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}