There are three different types of layouts for websites: Fixed Width, Fluid Width, and Elastic Width. In this screencast we look at all these three varieties of sites out on the web as well as some hybrid sites and other techniques for making use of wider browser windows. True “fixed width” sites will be a thing of the past when the modern browsers of today take hold in greater numbers. Opera 9, Firefox 3, and IE 8 all have “zoom” abilities, which make fixed width sites behave like elastic width sites. At the end of the screencast I show a very simple example on getting started with all three types.<\/p>\n","protected":false},"excerpt":{"rendered":"
There are three different types of layouts for websites: Fixed Width, Fluid Width, and Elastic Width. In this screencast we look at all these three varieties of sites out on the web as well as some hybrid sites and other techniques for making use of wider browser windows. True “fixed width” sites will be a […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"open","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":3157,"url":"https:\/\/css-tricks.com\/video-screencasts-2\/","url_meta":{"origin":1540,"position":0},"title":"Video Screencasts","date":"July 29, 2009","format":false,"excerpt":"#20: Introduction to jQuery Running time: 18:12 The popular javascript library jQuery is an amazing way to extend the design possibilities of your site beyond what CSS can do. But luckily, if you are already comfortable with CSS, you have a huge head start in jQuery! This is a very\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":249476,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/table-layout\/","url_meta":{"origin":1540,"position":1},"title":"table-layout","date":"January 4, 2017","format":false,"excerpt":"The table-layout property defines what algorithm the browser should use to lay out table rows, cells, and columns. table { table-layout: fixed; } As explained in the CSS2.1 specification, table layout in general is usually a matter of taste and will vary depending on design choices. Browsers will, however, automatically\u2026","rel":"","context":"In \"layout\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":15342,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/animate-heightwidth-to-auto\/","url_meta":{"origin":1540,"position":2},"title":"Animate Height\/Width to “Auto”","date":"November 30, 2011","format":false,"excerpt":"It's not possible to do thing.animate({ \"height\": \"auto\" });. So this is Darcy Clarke's method to allow that to work. You essentially clone the element, remove the fixed heights currently inflicting the element, and measure\/save the value. Then you animate the real element to that value. jQuery.fn.animateAuto = function(prop, speed,\u2026","rel":"","context":"With 27 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3322,"url":"https:\/\/css-tricks.com\/snippets\/css\/exactly-center-an-imagediv-horizontally-and-vertically\/","url_meta":{"origin":1540,"position":3},"title":"Exactly Center an Image\/Div Horizontally and Vertically","date":"August 10, 2009","format":false,"excerpt":".center { width: 300px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; } Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height\/width.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":8542,"url":"https:\/\/css-tricks.com\/snippets\/css\/truncate-string-with-ellipsis\/","url_meta":{"origin":1540,"position":4},"title":"Truncate String with Ellipsis","date":"February 18, 2011","format":false,"excerpt":"All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden. .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } CodePen Embed Fallback Note the fixed width in use here. The gist is that the\u2026","rel":"","context":"In \"ellipsis\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":251596,"url":"https:\/\/css-tricks.com\/snippets\/css\/fluid-typography\/","url_meta":{"origin":1540,"position":5},"title":"Fluid Typography","date":"February 23, 2017","format":false,"excerpt":"Getting right to the code, here's a working implementation: html { font-size: 16px; } @media screen and (min-width: 320px) { html { font-size: calc(16px + 6 * ((100vw - 320px) \/ 680)); } } @media screen and (min-width: 1000px) { html { font-size: 22px; } } It's worth looking at\u2026","rel":"","context":"In \"fluid type\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1540"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=1540"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1540\/revisions"}],"predecessor-version":[{"id":18090,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1540\/revisions\/18090"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1540"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}