About Adam

Adam Stout works in the technology field and is currently located in San Diego, CA.




Recent Entries


Annoying CSS

Posted: Jan 24, 2010
I've spent the last few evenings trying to update the layout of my site to handle resizing better.  Before it was hard-coded to be 972 pixels wide.  This looked fine on my laptop (and I'm hoping on most other people's computer's) but since I bought I 24" wide screen monitor I realized there was lots of unused space that could really be used by my photo gallery.  On the left, you can see what the gallery looked like before my changes.  There was only a fixed number of pictures per row which once again was fine on my laptop but left a lot of unused space on larger monitors.

To my point, I tried to allow the CSS template to flow with the center expanding but I just couldn't get it to work right.  I need to have three variable height columns to work but that just doesn't seem possible.  This is the closest I found to what I wanted but it couldn't use a background image for the side columns (other than that, it would have been fine).

I ended up using the old borderless table technique.  I wanted to stick to CSS only, but like I said, I don't think it is possible (I though you could use the new table emulation in CSS but that isn't support everywhere and is basically just using a table anyway).

Moral of the story, sometimes you should just use the simplest approach instead of wasting time trying to fancy.  On the plus side, you see on the right the same photo gallery as on the left but now it is stretched out and can take up more of the screen space which is a good thing for the galleries that have hundreds of pictures as well as when viewing all the photos with a certain tag (which is a recent feature added to the gallery).


Please log on to add your comments.