{"id":726,"date":"2019-12-15T11:49:15","date_gmt":"2019-12-15T16:49:15","guid":{"rendered":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/?p=726"},"modified":"2023-01-05T19:54:39","modified_gmt":"2023-01-06T00:54:39","slug":"fake-centered-fixed-width","status":"publish","type":"post","link":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2019\/fake-centered-fixed-width\/","title":{"rendered":"Fake centered fixed width"},"content":{"rendered":"\n<p><strong>What:<\/strong> Say the background of your website is white and you want, for example, a different color header, full width, with content inside the header that&#8217;s contained at a lesser width, and centered. Common enough scenario and usually created with one HTML-element (div, section, &#8230;) at full width and with a colored background and one HTML-element (div, article, &#8230;) with a fixed width and centered, holding the content.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Well, what if you only had one HTML-element to work with and you wanted this effect?<\/p>\n\n\n\n<p><strong>How:<\/strong> Obviously, the only way to do this is with padding. Say you want the fixed width to be 960px and the top and bottom padding 1rem:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">padding: 1rem calc(50vw - (960px\/2));<\/code><\/pre>\n\n\n\n<p><strong>Where:<\/strong> Sridhar Katakam <a rel=\"noreferrer noopener\" href=\"https:\/\/sridharkatakam.com\/horizontal-submenu-genesis\/\" target=\"_blank\">Genesis and WordPress tutorials<\/a>.<\/p>\n\n\n\n<p><strong>EDIT:<\/strong> I&#8217;ve found that in practice this does not reliably lead to an element with a width of 960px. <code>vw<\/code> of course is the width of the viewport, which does not take into account the overflow-y scrollbar. Since scrollbars don&#8217;t all have the same width, you can&#8217;t compensate for it. So, <em>where possible<\/em>, I&#8217;ve found this a more reliable solution:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">padding: 1rem calc(50% - (960px\/2));<\/code><\/pre>\n\n\n\n<p>And personally, I find this notation more intuitive:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">padding: 1rem calc((100% - 960px) \/ 2);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>What: Say the background of your website is white and you want, for example, a different color header, full width, with content inside the header that&#8217;s contained at a lesser width, and centered. Common enough scenario and usually created with one HTML-element (div, section, &#8230;) at full width and with a colored background and one &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Fake centered fixed width\" class=\"read-more button\" href=\"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2019\/fake-centered-fixed-width\/#more-726\" aria-label=\"Read more about Fake centered fixed width\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[17,45],"class_list":["post-726","post","type-post","status-publish","format-standard","hentry","category-new-things","tag-css","tag-html","infinite-scroll-item"],"_links":{"self":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/comments?post=726"}],"version-history":[{"count":2,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/726\/revisions"}],"predecessor-version":[{"id":1231,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/726\/revisions\/1231"}],"wp:attachment":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/media?parent=726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/categories?post=726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/tags?post=726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}