UNDERDOG of PERFECTION

Building a centered gallery grid with flexible column count for responsive web pages

It took an untold number of fruitless Google searches and a couple of hours of trial and error to get this to work. I think part of the problem may have been that I simply didn’t really know how to describe what I’m trying to do in a way that would yield good search results. And so, I hope now that I have a solution, sharing it here might help someone else.

The situation: I have a web page that contains a gallery of square images. The page is responsive but the sizes of the images are fixed. I want the page to automatically show as many images across as will fit in the layout on any particular screen, creating anywhere from one to five columns as needed. And, it needs to stay centered.

I got all of this going pretty easily… all except the “it has to stay centered” part. I was able to get it to work if there was only a single line of images, but as soon as they wrapped to multiple lines, the container element went to a full width and the images became left-aligned. It took considerable effort to discover a solution, although that solution itself is embarrassingly simple. I was hung up on a couple of possible approaches that got me nowhere, which probably contributed to the problems I had finding the right way to do it.

So… here we go. We’ll start with an unordered list:

<ul class="gallery">
  <li><img src="image.jpg" alt="" /></li>
  <li><img src="image.jpg" alt="" /></li>
  <li><img src="image.jpg" alt="" /></li>
  <li><img src="image.jpg" alt="" /></li>
  <li><img src="image.jpg" alt="" /></li>
  <li><img src="image.jpg" alt="" /></li>
  <li><img src="image.jpg" alt="" /></li>
  <li><img src="image.jpg" alt="" /></li>
  <li><img src="image.jpg" alt="" /></li>
  <li><img src="image.jpg" alt="" /></li>
</ul>

And here is that embarrassingly simple CSS:

ul.gallery {
text-align: center;
}

ul.gallery li {
display: inline-block;
}

OK, that’s not really all of the CSS. Your li tag needs height and width properties, and you may want to give it margin as well. But those values are going to be specific to your project.

M83: Midnight City

Normally (in a rather narcissistic fashion, I suppose), I listen to my own music when I run. But today I listened to one of my favorite albums of 2011, by one of my favorite bands around today, M83: Hurry Up, We’re Dreaming. It turned out to be pretty great to run to.

I’m not a hardcore runner. I’ve rarely, if ever, gotten a “runner’s high,” but I think it happened today, about 2 miles into my run, while listening to “Raconte-moi une histoire.” Is the fact that the song’s lyrics are spoken word, by a child, describing (I think) psychoactive toads? Perhaps. Whatever it was, the music was a perfect tempo for me to lock into, and as the music built up, I lost all sense of physical limitations. My limbs were tingling and I felt like I was floating up off the ground.

Then as soon as the music faded and I rounded a corner, I crashed back to earth and was slogging along again, but at least I kept at it.

Anyway, there’s no official video for “Raconte-moi une histoire,” but here’s a live performance of “Midnight City,” the big single from Hurry Up, We’re Dreaming. It first aired on Carson Daly’s extremely-late-night show. Enjoy!

OK, Microsoft, you’re off the hook…

But not in the way that the Cheat is off the hook.

I fixed the IE6 CSS problem I ranted about yesterday, and it was perhaps one of the more satisfying solutions I’ve encountered where IE is concerned, because all it required was that I remove a few lines of CSS code that turned out to be unnecessary anyway.

My approach to CSS is one of building a solid page structure and then fine-tuning the details until I have exactly what I want. A side effect of this is that sometimes I leave in unnecessary definitions along the way. If they don’t alter the output in the browsers I test (Firefox always, Safari often, IE7 at least once or twice along the way), then it’s good.

But in this case I had an entire definition that was completely unnecessary. It wasn’t hurting anything in Firefox or Safari, but it was doing all sorts of crazy crap in IE6. Naturally, in such a situation, I blame Microsoft.

To be honest it’s not really (entirely) Microsoft’s fault. I have to recognize that I’m building pages to be interpreted by different rendering engines (the latter part of which is where Microsoft’s blame, to the extent it exists, resides). But there are an unlimited number of ways to write standards-compliant code (which I think I do pretty well, most of the time), not all of which lead to the same desirability of output. So if there’s a standards-complaint way to also accommodate IE’s quirks, that’s the way to go. My biggest problem is that my access to IE6 is fairly limited, and IE7, although it has its own quirks, is a lot closer to what Firefox and Safari produce.

So… there you have it. The site should now look good in every major browser currently in use (Firefox, Safari, IE7 and IE6). If not, complain below!

On a side note, Steve Ballmer sticks out his tongue a lot. (Even when you’re not deliberately looking for it.)

Fair and balanced journalism: let every idiot with an uninformed (if not willfully ignorant) opinion have a voice!

I have to admit it, I’m a glutton for punishment. While I may not be able to tolerate watching the narcissistic twentysomething drivel that’s on MTV 25 hours a day (what happened to music videos?), I do seem to be strangely drawn to that which I loathe in the media. It’s kind of like holding your hand over a burning candle or eating a habañero pepper: an endurance test. So occasionally I’ll turn on Fox News or flip the car radio over to the blowhards on KTLK, and just see how long I can stand it.

Such is the case with Katherine Kersten, a “writer” for the Minneapolis StarTribune, whose “column covers a range of topics reflecting her experiences and interests, with a special emphasis on American culture, politics, religion, family life and education” according to her bio blurb.

What are her qualifications for twice-weekly space in the state’s most widely circulated newspaper? Beats the hell out of me, but clearly I’m not the only person who’s asking the question…

1 … 2 … 3 … 4 … 5 … 6

And that’s just out of the first 10 results that came back on Google. (Of the other four, two were official Strib pages, one was an article she wrote for that bastion of fair and balanced journalism, the Wall Street Journal, and the other was for an anti-public education think tank.)

Suffice to say, Kersten’s empty-headed regurgitation of every imaginable right-wing talking point is scarcely worth dissecting, but that leaves unanswered the greater question of what possible qualification she can have for this job. Perhaps it’s just a sad reflection of the state of journalism in the U.S. today that so little attention is paid to getting the facts, as long as “both sides” (yes, there are always two—and only two—cut-and-dried sides to every possible issue) get their equal share of airtime and/or column inches.

And, of course, since the left has been and continues to be grossly over-represented in the media (just ask Rush Limbaugh… or Sean Hannity… or Bill O’Reilly… or— hmm…), it is now every TV, radio station and newspaper’s duty to graciously cede as much time and space as possible to any random Joe or Jane Redstate who has a larynx or basic typing skills.

After a little more digging to try to find any hint of Katherine Kersten’s journalistic credentials—specifically, changing my Google search from Katherine Kersten to "Katherine Kersten" biography—I came across this blog. (Yes, it appears that just about the only place online where her existence is acknowledged, besides at the Strib’s own site, is on blogs complaining about her appalling Strib column.) I’m still not any closer to her résumé, but I thought this blog was worth linking to anyway. It’s not easy to nail down exactly where this writer stands politically; unlike Kersten’s hackwork (and probably mine as well, but I’m not on the payroll of a major newspaper) his writing seems to be well-informed and reasoned, and removed enough from direct opinionated rant to allow the reader to form his or her own opinion.

Well, we have this unbiased source (check the URL), which identifies her impressively as such: “Katherine Kersten is Director of E-Pluribus and Distinguished Senior Fellow for Cultural Studies at Center of the American Experiment, a conservative think tank in Minneapolis.”

Hmm… fascinating. I’m not really sure what “Director of E-Pluribus” means (or even might possibly mean), and I also don’t know what it takes to become a “Distinguished Senior Fellow for Cultural Studies” at a think tank no one I know has ever heard of, even though it’s based right here in town, but I’ve just found a nice and tidy list of companies to boycott.

I harbor a secret fantasy: I truly want to believe that Katherine Kersten is part of the same realm of subversively parodic entertainment as the Weekly World News or professional wrestling. Perhaps she really belongs with the likes of Phil Hendrie (or to a less covert extent, Stephen Colbert). Maybe I’m just taking her too seriously; I’m not in on the joke. But sadly, I don’t think it’s a joke. Or if it is, it’s not a very good one.

The quest for truth continues. If anyone out there happens to know what Katherine Kersten did prior to writing for the Strib, particularly anything that might actually qualify her to write for the Strib, please let me know!

Scott Anderson is Director in Extremis and Distinguished Senior Fellow for Something Something Blah Blah Blah at Center of the Known Universe, a wondrous place that only he knows about.