particulars

CSS columns that expand to full/equal vertical height

Mimi — Tue, 30 Mar 2010 00:01:16 +0000

column stuff

lots more column stuff to make it a longer column lots more column stuff to make
it a longer column lots more column stuff to make it a longer column

This is a transcript from a Facebook conversation regarding CSS columns that expand to full/equal vertical height:

Anon Friend March 1 at 3:48pm
FUCK THEM OMGOMGOMG I”M GONNA USE A TABLE

Thank you, I needed that.

Mimi Flynn March 1 at 3:55pm
NO!!! DON’T DO IT!!!

Anon Friend March 1 at 3:58pm
See comment I just posted: http://www.entertainingcode.com/archives/the-broken-web/

The linked article seems absolutely right to me.

Mimi Flynn March 1 at 4:02pm
i’m really starting to wonder what you’re trying to do. I’m filled with suggestions, but nothing to reference.

Anon Friend March 1 at 4:08pm
I need two columns side-by-side (1 px border between them), left one with background color A, right one with background color B. Thus they both need to be the same height, i.e. the smaller one needs to vertically expand to be the same height as the larger one. See the article linked from Hacker News for the various ways to do this without tables, none of them remotely good.

Or maybe I should just say “the web doesn’t really support this” and design appropriately, i.e. just let the left sidebar be small, a little parasitic attachment on the main content area, the right column. That’s philosophically attractive, but, damn, the web *should* support basic multi-column layout.

Mimi Flynn March 1 at 4:17pm
Is these columns nested inside of a larger div? you could make the larger div the smaller column’s background color and position the other column in such a way that none of that color shows around it.

so:




column stuff


lots more column stuff to make it a longer column lots more column stuff to make
it a longer column lots more column stuff to make it a longer column

Anon Friend March 1 at 11:16pm
I’m almost certain there’s a reason that won’t work for my situation (like I’ve been down that road before) but I look forward to investigating more in the morning. I’ll let you know. Thank you!

In the meantime: what’s the intent of the clear:both and overflow:hidden in your outer div?

Mimi Flynn March 2 at 8:09am
clear:both; will clear the floats of the inner divs in some browsers

overflow:hidden; reminds the browser to wrap the outer div around the floated contents (thus, bringing the background color down to the bottom of the tallest column) instead of it just staying up around the top. If you didn’t use this the first time you tried this method, you probably didn’t see the background of the outer div under the shorter column.

Anon Friend March 3 at 12:37pm
Oh no, once you let tables in just a little bit, it’s too late, they take over everything! They’re like Satan putting his foot inside the door.

Mimi Flynn March 3 at 1:23pm
i knew it… another win for Satan… damn.

Its a common problem for beginners, really.

In a 2004 article for A List Apart, Dan Cederholm approached this common question:

How do you get the right column’s background color to extend all the way down the page?

In a time when HTML code was shifting from tables to HTML and CSS for style, this became a common issue.

A little more advanced…

Recently, while working on new project, I’ve been wondering how I can get multiple columns to match in height when the content is dynamic. I knew that jQuery could stretch scroll-down menus horizontally to the width of the longest item, so, I did a quick search and found an EqualHeights plugin, which, funnily enough, linked to the above article in A List Apart.

You can see the finished product at yellowtrenchcoat.com. Each list-item height is set to the tallest item in the unordered list.

Tools for test sites locally

Mimi — Wed, 10 Mar 2010 01:24:07 +0000

It used to be that one would have to finagle with their Mac OS X to get a test server running. I’ve spent many an hour on my old titanium Powerbook typing away at the terminal essentially feeling about in the dark, until PHP would parse in my browser from a local directory.

Now, we have options! Need a local testing environment to work on your latest WordPress theme? Trying to discover the magical combination of CCK, Views and Panels to make Drupal do what you want but you’re in flight and too cheap to pay $13 for 3 hrs of wireless?

Windows:
WAMPserver

Mac:
MAMP

Windows, Mac, *nix:
XAMPP
Acquia Drupal Stack – automatically installs Acquia Drupal as well as Apache, MySQL, and PHP. Easily creates new Drupal sites with control panel interface.

Quick Tip: z-index like issues

Mimi — Wed, 24 Feb 2010 18:19:00 +0000

Add the following attributes to all embedded videos or maps that appear in front of a static element (such as a toolbar or footer bar) to push them back where they belong:

style="z-index: 0" wmode="transparent"

Its very rare that you would need to do this, but more statically positioned toolbars and such have been popping up all over the place, so, it seems it will become more and more common as this trend spreads.

Front-End Code Checklist

Mimi — Fri, 12 Feb 2010 20:45:32 +0000

The following is a code checklist to which I plan to adhere. If you look at my current sites, it will be easy to see that I have some work to do.

Have any suggestions? Please post them in the comments.

Code Validation

Why validate your code? w3.org said it best:

One of the important maxims of computer programming is: “Be conservative in what you produce; be liberal in what you accept.”

Browsers follow the second half of this maxim by accepting Web pages and trying to display them even if they’re not legal HTML. Usually this means that the browser will try to make educated guesses about what you probably meant. The problem is that different browsers (or even different versions of the same browser) will make different guesses about the same illegal construct; worse, if your HTML is really pathological, the browser could get hopelessly confused and produce a mangled mess, or even crash.

That’s why you want to follow the first half of the maxim by making sure your pages are legal HTML. The best way to do that is by running your documents through one or more HTML validators.

Jump Links

Those long lists of menu links aren’t so handy when viewed without styles on a mobile phone or experienced through a screen reader. Please give the option to “Jump to Main Content” and “Jump to Footer” and wherever else users will most likely want to “Jump” to.


	Main Content | Footer

I put my jump links into a

that is styled into a 1 x 1 pixel spot.

#goto {
	height:1px;
	text-indent:-9999px;
	width:1px;
}

Print Styles

Another instance where those long navigation menus get in the way is when a website is printed. Pages of links are useless and a waste. Hide them and optimize your featured text for print.

Use microformats when possible

Microformats.org puts it this way:

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

Overall, microformats are an effort to standardize the code for certain kind of information, such as calendar events or contact information, and make them exportable from the browser to a calendar or address book.

microformats.org
Operator Firefox Plugin leverages microformats and other semantic data that are already available on many web pages to provide new ways to interact with web services.
Web Developer Firefox Plugin has features that can assist in the inclusion of microformats in your site.

sitemap

What is a sitemap? Sitemaps.org sums it up this way:

Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling. In its simplest form, a Sitemap is an XML file that lists URLs for a site along with additional metadata about each URL (when it was last updated, how often it usually changes, and how important it is, relative to other URLs in the site) so that search engines can more intelligently crawl the site.

Web crawlers usually discover pages from links within the site and from other sites. Sitemaps supplement this data to allow crawlers that support Sitemaps to pick up all URLs in the Sitemap and learn about those URLs using the associated metadata. Using the Sitemap protocol does not guarantee that web pages are included in search engines, but provides hints for web crawlers to do a better job of crawling your site.

Consolidate and compress CSS and Javascript files possible

To reduce calls to the server.

Use sprites when possible

I have found sprites to be the most helpful to me when I am creating image roll-overs. I had previously used two different images, but, upon hover, the original image would disappear completely for a second until the second image loaded. With sprites,

favicon

That little icon next to the URL of the website you currently viewing is called a “favicon” or “fav.ico”. It is 16 x 16 pixels, usually a .png, and supports transparency.

iPhone Icon

If someone wants to bookmark your page to the homescreen of their iPhone, are you prepared with a custom icon?

Create a 45px square icon and name it “apple-touch-icon.png” and pop it into the root directory, or link to it with:

Google Analytics and Webmaster Tools

Really, why wouldn’t you. Its free, filled with features, and provides an insight into your users that will help you better serve them.

Please, feel free to post your additions in the comments.

particulars

CSS columns that expand to full/equal vertical height

Its a common problem for beginners, really.

A little more advanced…

Tools for test sites locally

Quick Tip: z-index like issues

Suggested Articles for Beginners

Design Process

Business

Site Elements

Front-End Code Checklist