{"id":74,"date":"2006-02-04T22:13:20","date_gmt":"2006-02-05T03:13:20","guid":{"rendered":"http:\/\/www.killersites.com\/blog\/?p=74"},"modified":"2017-02-23T10:12:33","modified_gmt":"2017-02-23T15:12:33","slug":"matching-div-heigths","status":"publish","type":"post","link":"https:\/\/www.killersites.com\/blog\/2006\/matching-div-heigths\/","title":{"rendered":"The Matching Columns Script Video Tutorial: Matching CSS div Heights"},"content":{"rendered":"<p>One of the fundamental problems people have with CSS page-level layout is matching CSS div heights. Others might&nbsp;call&nbsp;this &#8216;matching column heights&#8217; in web pages.&nbsp;&nbsp;<\/p>\n<p>In this article\/video (see below,) we are going to solve this problem using&nbsp;a lesser known&nbsp;JavaScript method: the <strong>Matching Columns Script<\/strong>. <\/p>\n<p>Let&#8217;s start&nbsp; out by checking out a diagram that illustrates&nbsp;the problem:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" height=\"239\" alt=\"Diagram of div heights problem.\" hspace=\"5\" src=\"http:\/\/www.killersites.com\/UserFiles\/Image\/div_heights.gif\" width=\"378\" vspace=\"5\" \/><\/p>\n<p>People have come out with different solutions including the &#8216;Faux columns&#8217; hack: &nbsp;using a vertically tiled background image to create the illusion of a column. <\/p>\n<p>The &#8216;Faux columns&#8217; hack\/trick works, but it does have some limitations:<\/p>\n<ul>\n<li>You have to mess around with background images when creating the fake\/faux columns effect &#8211; there is even more <font size=\"2\">mucking about<\/font> when you have liquid layouts. <\/li>\n<li>You won&#8217;t be able to use CSS border styling (on your div&#8217;s that create the columns) because it would reveal the hack. <\/li>\n<\/ul>\n<p><strong>THE BETTER WAY TO HANDLE THIS PROBLEM: DOM SCRIPTING (JavaScript)<\/strong><\/p>\n<p>JavaScript (sometimes called ECMA script,) is the programming language built into all the browsers that allow geeks\/nerds, to have practically total control over how things appear in a web page &#8211; it&#8217;s very powerful.<\/p>\n<p><strong>Note:<\/strong> DOM scripting (the term,)&nbsp;is a quick way to describe&nbsp;<strong>using JavaScript to control a web page&#8217;s structure<\/strong>. If this makes no sense, don&#8217;t worry about it as&nbsp;you need no programming knowledge&nbsp;to use the technique that is covered here.&nbsp;<\/p>\n<p>&nbsp;<strong>WHY IS THE JAVASCRIPT METHOD BETTER?<\/strong><\/p>\n<p>You are better off with the JavaScript method (rather than the &#8216;Faux columns&#8217; hack,&nbsp;) because:<\/p>\n<ol>\n<li>Once it is applied, you don&#8217;t have to worry about it as it automatically adjust itself to change&nbsp;with your page(s). <\/li>\n<li>It is much easier\/faster to apply than the &#8216;Faux columns&#8217; hack. <\/li>\n<\/ol>\n<p>&nbsp;<strong>GETTING STARTED<\/strong><\/p>\n<p>Attached with this article you will find the files you need to apply the script:<\/p>\n<ol>\n<li>The Javascipt file. <\/li>\n<li>The CSS document. <\/li>\n<li>A sample web page that puts it altogether. <\/li>\n<\/ol>\n<p>Now it&#8217;s time to watch the video to learn how to use it.<\/p>\n<p><\/p>\n<p class=\"video\">&nbsp;<a href=\"http:\/\/killersites.com\/videoTutorials\/Tutorial_WebDesign2\/matching_divs.html\" target=\"_blank\"><em>MATCHING DIV HEIGHTS VIDEO<\/em><\/a><\/p>\n<p><a href=\"http:\/\/killersites.com\/videoTutorials\/Tutorial_WebDesign2\/matching_divs.html\" target=\"_blank\"><em><br \/><\/em><\/a><\/p>\n<p><strong>CONCLUSION<\/strong><\/p>\n<p>There&nbsp;is one downside to this technique: <\/p>\n<p>It won&#8217;t work if people have JavaScript turned off. Fortunately, the vast majority of people out there have it on. Last time I checked my own stats, nobody had JavaScript disabled.<\/p>\n<p>That said, though it looks a lot better when your columns heights match, I would <strong>not<\/strong> consider it mission-critical to a website. That is to say;&nbsp;people will still be able to use the website, so I am willing to accept that for some rare (paranoid) individuals,&nbsp;the columns will not match.<\/p>\n<p class=\"files\"><a href=\"http:\/\/www.killersites.com\/videoTutorials\/Tutorial_WebDesign2\/MatchingColumns.zip\">Source Files<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the fundamental problems people have with CSS page-level layout is matching CSS div heights. Others might call this &#039;matching columns heights&#039; in web pages. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/posts\/74"}],"collection":[{"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":3,"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/posts\/74\/revisions"}],"predecessor-version":[{"id":4836,"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/posts\/74\/revisions\/4836"}],"wp:attachment":[{"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/categories?post=74"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.killersites.com\/blog\/wp-json\/wp\/v2\/tags?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}