{"id":16834,"date":"2013-04-08T18:01:44","date_gmt":"2013-04-08T10:01:44","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16834"},"modified":"2025-04-24T17:20:24","modified_gmt":"2025-04-24T09:20:24","slug":"css-equal-height","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-equal-height\/","title":{"rendered":"How to Achieve Equal Column Heights Using CSS"},"content":{"rendered":"<p>Traditionally, websites feature a main content area and a sidebar. Often, the main content is longer than the sidebar, resulting in uneven column heights.<\/p>\n<p>However, there are scenarios where you\u2019d want both columns to have equal heights. One popular solution to this issue is the <strong>Faux Column<\/strong> technique.<\/p>\n<p>By implementing this technique, you can create a visually balanced and aesthetically pleasing layout.<\/p>\n<div class=\"button\">\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/css-equal-height\/\">See demo<\/a>\n<\/div>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css-back-to-basics-terminology-explained\/\" class=\"ref-block__link\" title=\"Read More: CSS Terminologies Explained\" rel=\"bookmark\"><span class=\"screen-reader-text\">CSS Terminologies Explained<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-back-to-basics-terminology-explained.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-9063 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-back-to-basics-terminology-explained.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">CSS Terminologies Explained<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tCSS has become the most popular language for front-end design and has amazing abilities with the release of...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Faux Column Technique Explained<\/h2>\n<p>Dan Cederholm first introduced the term \u201cFaux Column\u201d <a href=\"https:\/\/alistapart.com\/articles\/fauxcolumns\/\" rel=\"nofollow noopener\" target=\"_blank\">in his article<\/a> on A List Apart. The concept behind this technique is to create the illusion of equal column heights by applying a background color or image to the container, rather than to the sidebar itself.<\/p>\n<p>Let\u2019s delve into an example to better understand how this technique functions.<\/p>\n<pre>\n&lt;div class=\"container clearfix\"&gt;\n    &lt;div class=\"main\"&gt;Lorem ipsum dolor sit amet...&lt;\/div&gt;\n    &lt;div class=\"sidebar\"&gt;Lorem ipsum dolor sit amet...&lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre>\n<p>As illustrated above, we have three <code>div<\/code> elements: one for the container and two for the main content and sidebar. Notice that the main content has more text than the sidebar.<\/p>\n<p>Next, we apply specific styles to ensure that the main content and sidebar are displayed side-by-side, each with a different background color.<\/p>\n<pre>\n.container {\n    \/* Container styles here *\/\n}\n.main, .sidebar {\n    float: left;\n    padding: 20px;\n}\n.main {\n    width: 400px;\n    background-color: LightSlateGrey;\n}\n.sidebar {\n    width: 200px;\n    background-color: Tomato;\n}\n<\/pre>\n<p>This results in columns with unequal heights, as shown in the screenshot below:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Unequal Column Heights\" height=\"130\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-equal-height\/unequal.jpg\" width=\"500\"><\/figure>\n<p>To implement the Faux Column technique, we remove the background color from the sidebar and apply it to the container:<\/p>\n<pre>\n.container {\n    background-color: Tomato;\n}\n.main, .sidebar {\n    float: left;\n    padding: 20px;\n}\n.main {\n    width: 400px;\n    background-color: LightSlateGrey;\n}\n.sidebar {\n    width: 200px;\n}\n<\/pre>\n<p>Now, the sidebar appears to have the same height as the main content, achieving visual balance.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Equal heights via Faux Column\" height=\"131\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-equal-height\/faux.jpg\" width=\"500\"><\/figure>\n<p>While this technique generally works well, there are situations where it may not be effective. For instance, adding a margin to the main content can disrupt the illusion, as shown below:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Faux Column Technique Failure\" height=\"139\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-equal-height\/fail.jpg\" width=\"500\"><\/figure>\n<h2>Understanding the CSS Table Technique<\/h2>\n<p>Another effective way to achieve equal column heights is through the <strong>CSS Table<\/strong> technique. This method leverages the CSS display property to make HTML elements behave like table cells. Personally, this is my go-to approach for handling unequal column heights.<\/p>\n<p>Let\u2019s examine an example to see how this technique operates.<\/p>\n<p>The HTML structure remains the same as in the previous example. The difference lies in the CSS. We start by setting the container\u2019s display property to \u2018table.\u2019 Next, we configure the <code>.main<\/code> and <code>.sidebar<\/code> elements to display as <code>table-cell<\/code>. It\u2019s crucial to remove the float property from these elements; otherwise, the <code>table-cell<\/code> display will not work correctly.<\/p>\n<pre>\n.main, .sidebar {\n    float: none;\n    padding: 20px;\n    vertical-align: top;\n}\n.container {\n    display: table;\n}\n.main {\n    width: 400px;\n    background-color: LightSlateGrey;\n    display: table-cell;\n}\n.sidebar {\n    width: 200px;\n    display: table-cell;\n    background-color: Tomato;\n}\n<\/pre>\n<p>As mentioned, this approach yields the same visual outcome as shown below. However, unlike the Faux Column technique, this method doesn\u2019t rely on visual tricks. Instead, we set the <code>div<\/code> elements to act like table cells. As you may already know, the height of each column will automatically adjust to match the tallest one.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Equal heights via CSS Table\" height=\"132\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-equal-height\/table.jpg\" width=\"500\"><\/figure>\n<figure>\n<div class=\"button\">\n        <a href=\"https:\/\/hongkiat.github.io\/css-equal-height\/\" rel=\"nofollow noopener\" target=\"_blank\">View Demo<\/a>\n        <a href=\"https:\/\/github.com\/hongkiat\/css-equal-height\/\" rel=\"nofollow noopener\" target=\"_blank\">Download Source<\/a>\n    <\/div>\n<\/figure>","protected":false},"excerpt":{"rendered":"<p>Traditionally, websites feature a main content area and a sidebar. Often, the main content is longer than the sidebar, resulting in uneven column heights. However, there are scenarios where you\u2019d want both columns to have equal heights. One popular solution to this issue is the Faux Column technique. By implementing this technique, you can create&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Achieve Equal Column Heights Using CSS - Hongkiat<\/title>\n<meta name=\"description\" content=\"Traditionally, websites feature a main content area and a sidebar. Often, the main content is longer than the sidebar, resulting in uneven column heights.\" \/>\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.hongkiat.com\/blog\/css-equal-height\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Achieve Equal Column Heights Using CSS\" \/>\n<meta property=\"og:description\" content=\"Traditionally, websites feature a main content area and a sidebar. Often, the main content is longer than the sidebar, resulting in uneven column heights.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-equal-height\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-04-08T10:01:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:20:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-equal-height\/unequal.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\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.hongkiat.com\\\/blog\\\/css-equal-height\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-equal-height\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Achieve Equal Column Heights Using CSS\",\"datePublished\":\"2013-04-08T10:01:44+00:00\",\"dateModified\":\"2025-04-24T09:20:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-equal-height\\\/\"},\"wordCount\":441,\"commentCount\":33,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-equal-height\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-equal-height\\\/unequal.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-equal-height\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-equal-height\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-equal-height\\\/\",\"name\":\"How to Achieve Equal Column Heights Using CSS - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-equal-height\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-equal-height\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-equal-height\\\/unequal.jpg\",\"datePublished\":\"2013-04-08T10:01:44+00:00\",\"dateModified\":\"2025-04-24T09:20:24+00:00\",\"description\":\"Traditionally, websites feature a main content area and a sidebar. Often, the main content is longer than the sidebar, resulting in uneven column heights.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-equal-height\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-equal-height\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-equal-height\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-equal-height\\\/unequal.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-equal-height\\\/unequal.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-equal-height\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Achieve Equal Column Heights Using CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Achieve Equal Column Heights Using CSS - Hongkiat","description":"Traditionally, websites feature a main content area and a sidebar. Often, the main content is longer than the sidebar, resulting in uneven column heights.","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.hongkiat.com\/blog\/css-equal-height\/","og_locale":"en_US","og_type":"article","og_title":"How to Achieve Equal Column Heights Using CSS","og_description":"Traditionally, websites feature a main content area and a sidebar. Often, the main content is longer than the sidebar, resulting in uneven column heights.","og_url":"https:\/\/www.hongkiat.com\/blog\/css-equal-height\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-04-08T10:01:44+00:00","article_modified_time":"2025-04-24T09:20:24+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-equal-height\/unequal.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-equal-height\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-equal-height\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Achieve Equal Column Heights Using CSS","datePublished":"2013-04-08T10:01:44+00:00","dateModified":"2025-04-24T09:20:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-equal-height\/"},"wordCount":441,"commentCount":33,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-equal-height\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-equal-height\/unequal.jpg","keywords":["CSS"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-equal-height\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-equal-height\/","url":"https:\/\/www.hongkiat.com\/blog\/css-equal-height\/","name":"How to Achieve Equal Column Heights Using CSS - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-equal-height\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-equal-height\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-equal-height\/unequal.jpg","datePublished":"2013-04-08T10:01:44+00:00","dateModified":"2025-04-24T09:20:24+00:00","description":"Traditionally, websites feature a main content area and a sidebar. Often, the main content is longer than the sidebar, resulting in uneven column heights.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-equal-height\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-equal-height\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-equal-height\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-equal-height\/unequal.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-equal-height\/unequal.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-equal-height\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Achieve Equal Column Heights Using CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4nw","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=16834"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16834\/revisions"}],"predecessor-version":[{"id":74126,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16834\/revisions\/74126"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=16834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=16834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=16834"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=16834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}