New store CSS updates

Today I launched a new store and donation page for Creative Commons and while we're always looking to bolster our public support of the non-profit (and the t-shirts are really cool), I mention it here to show what's possible with CSS.

When I did a mockup of the store page, I did it in photoshop and aimed for a clean, catalog look that brought the photos of the products to the forefront. Once everyone liked it, I had a slight pang of worry that I might have to resort to using a table to align the photos and text.

I've been working on some fairly advanced CSS layouts the past couple years, and in the past year I've gotten to the point where I can reproduce almost anything in CSS, thanks mostly to a variety of float techniques that Doug Bowman explains here.

I started laying out the page like any other, using a variety of CSS columns floated to align text and images. I figured I'd hit a sticking point eventually and if necessary, resort to some ugly table hack to finish the job. I surprised myself in the end by never reaching that sticking point, and the end result is a nearly pixel-perfect identical layout, and it's all CSS (I know there are one or two minor html nits keeping it from validation).

I always knew CSS was powerful, flexible, and useful, but in the back of my mind I felt there a few browser limitations that could keep it from letting me do 100% of layouts using it. After this project I think it's safe to say at this point that using tables for layout is absolutely and completely a thing of the past.