I wrote a minimalistic photo gallery for my wife. It’s a quick mix of php and MySQL on the server, css/html page, and some Javascript+jQuery for a still unfinished slideshow function.

The layout spec was:

– left-side navigation column – picture to the right of the navigation, with a title centered underneath – work with pictures of varying sizes – a screen-wide footer – as little else as possible

I wanted to make it as friendly as possible to screen sizes and form factors, so that even in the smallest or weirdest screen, you would see as much of the picture as possible. Therefore, I stuck the title in the nav bar rather than as a horizontal banner, so that the picture would not have wasted space above it.

As far as I can see, it looks great on everything from large monitors to an iPhone. The photo uses all the height available the device, the left bar will squeeze and word wrap in horizontally narrow screens, the photo will be pleasantly centered in wide screens, and it will adapt nicely to on-the-fly changes in screen size.

Being the old dog that I am, I laid out the page using classic html tables rather than the more modern css layout paradigm (of course, I still used css for styling). When I was done, I looked into doing it the css way; table cells and nested tables are hard to keep track of in html, and the design is so simple, that css should make it much easier. Conclusion?

It can’t be done with css.

Separate elements in css can’t have the kind of flexibility and influence on each other that table cells have. In essence:

– you can’t dock two elements together with css, so if you have two elements side by side, in narrow screens the element on the right will wrap to the “next” line, ending up below the left element.

– to force elements to stay on the same line, you have to take them out of the normal layout flow, which means they can’t influence each other anymore or dynamically resize to adapt to their content and the size of their container.

So tables it is. How disappointing! If you know how to solve this, please give me a shout. (And no, solutions that include any sort of hardcoded position or size are not acceptable)