Dave Dash2012-01-17T21:54:19-08:00http://davedash.com/Dave Dashdd+atom1@davedash.comTable based layouts? In this day in age? Really? How about grids?2007-10-05T00:00:00-07:00http://davedash.com/2007/10/05/table-based-layouts-in-this-day-in-age-really-how-about-grids<p>[tags]css, yui, grids, table, layout[/tags]</p>
<p>I think there are three kinds of people:</p>
<ol>
<li>People who learned tables for layouts and went to CSS+<code>div</code>s.</li>
<li>People who learned tables for layouts and never needed to learn CSS+<code>div</code>s (or insisted that this was way too complicated)</li>
<li>People who never learned tables.</li>
</ol>
<p>I would argue in some ways the second class of people are right, tables are a lot easier. Until you run into issues... and until you need to maintain your template code.</p>
<p>Luckily there's grids. Grids are easier than tables and easy to maintain and look at. You can achieve just about anything with <a href="http://developer.yahoo.com/yui/grids/">grids</a>.</p>
<!--next page-->
<!--more-->
<p>Personally I like using <a href="http://developer.yahoo.com/yui/">Yahoo's YUI</a> to get grid support. It's a CSS framework in the same way that <a href="http://jquery.com">jQuery</a> is a javascript framework or that <a href="http://symfony-project.com/">symfony</a> is a PHP5 framework.</p>
<p><a href="http://developer.yahoo.com/yui/">YUI</a> will normalize all your elements and give you a standard way to change the size of text and elements and give you <a href="http://developer.yahoo.com/yui/grids/">grids</a>.</p>
<p>So it helps to think of your layout in terms of grids... or columns. <a href="http://developer.yahoo.com/yui/grids/">YUI grids</a> supports some common combinations:</p>
<ul>
<li><code>.yui-g</code> - 2 equal size containers (nest to get 4).</li>
<li><code>.yui-gb</code> - 3 equal size containers</li>
<li><code>.yui-gc</code> - 2/3 - 1/3</li>
<li><code>.yui-gd</code> - 1/3 - 2/3</li>
<li><code>.yui-ge</code> - 3/4 - 1/4</li>
<li><code>.yui-gf</code> - 1/4 - 3/4</li>
</ul>
<p>Granted, this doesn't cover every scenario, but it's a start, and it's easy to build off of to create your own special sizes.</p>
<p>So to create some magical columns you do the following:</p>
<div><textarea name="code" class="html">
<div class="yui-g">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>
</textarea></div>
<p><code>yui-g</code> can be substituted for any of the above classes. <code>yui-u</code> is your columns or grid cells. <code>first</code> indicates the first column since <code>:first</code> isn't understood by some popular browsers.</p>
<p>Now you know grids. It's less complicated than the tabular equivalent:</p>
<div><textarea name="code" class="html">
<table class="layout">
<tr class="first_row">
<td class="col1"></td>
<td class="col2"></td>
</tr>
</table>
</textarea></div>
<p>With the framework in place, it's a lot easier to quickly adjust your layouts, and the readability is huge especially as your layouts grow.</p>
Equal height columns with jQuery2007-05-22T00:00:00-07:00http://davedash.com/2007/05/22/equal-height-columns-with-jquery<p>[tags]css, jQuery, layout, javascript, equal, columns, equal columns[/tags]</p>
<p>I've seen a few examples of how to equalize column heights using javascript, and none of them seem appealing:</p>
<ul>
<li><a href="http://www.tomdeater.com/jquery/equalize_columns/">jquery.equalizecols.js</a>
<ul>
<li>This required a few other libraries, and I wanted more flexibility (e.g. where the column should grow in order to equalize)</li>
</ul>
</li>
<li><a href="http://www.projectseven.com/tutorials/css/pvii_columns/index.htm">Project 7</a>
<ul>
<li>The Project 7 approach was the most interesting, but the code seemed a bit messy and not so open source friendly (even thought it might have been). It would let you specify which element was to grow inside a column.</li>
</ul>
</li>
<li><a href="http://www.html.it/articoli/nifty/index.html">Nifty Corners</a>
<ul>
<li>I had trouble with the syntax, but I liked how it just created a new element out of thin air...</li>
</ul>
</li>
</ul>
<p>So I wrote my own:</p>
<pre><code>$("#col1, #col2").equalizeCols();
</code></pre>
<p>will equalize the columns as expected</p>
<pre><code>$("#col1, #col2").equalizeCols("p,p");
</code></pre>
<p>will equalize the columns and add the extra space after the <code>p</code> tag in <code>#col1</code> or <code>#col2</code> (whichever is shorter).</p>
<p>Here's our function:</p>
<div><textarea name="code" class="js">
(function($) {
$.fn.equalizeCols = function(children){
var child = Array(0);
if (children) child = children.split(",");
var maxH = 0;
this.each(
function(i)
{
if (this.offsetHeight>maxH) maxH = this.offsetHeight;
}
).css("height", "auto").each(
function(i)
{
var gap = maxH-this.offsetHeight;
if (gap > 0)
{
t = document.createElement('div');
$(t).attr("class","fill").css("height",gap+"px");
if (child.length > i)
{
$(this).find(child[i]).children(':last-child').after(t);
}
else
{
$(this).children(':last-child').after(t);
}
}
}
);
}
})(jQuery);
</textarea></div>
<p>This requires jQuery of course, and it hasn't been tested much.</p>