So today I attempted to create a 3 column layout page for an art site I’m working on. What I was *trying* to get was:
- a large image in the left column, fixed width
- the thumbnails to switch images in the right, fixed width
- the title and description in the middle, stretchy
What I initially came up with had problems when the browser was resized to 800 or smaller (text overlapping thumbnails, images and text wrapping incorrectly all over the place). So after way too much time messing around with it, I finally ended up with something like:
- the left column floated left, fixed at 385px (including 15px of right padding)
- the right column floated right, fixed at 247px (including 7px of left padding, appearing as 15 when combined with the 8px from the li’s inside) and a left gray border
- the center column *not* floated, no width, with a left margin of 385px and a right margin of 262px (to give an extra 15px of “padding” on the other side of the gray border
This seemed to work; when scaled way down, the center stretchy text column floats under the large image and will wrap around/under the image and the thumbnails if the description text is excessively long.
I wish divs were as easy to work with for column layouts like this as tables…I try so hard to avoid tables because they’re a horrible faux pas nowadays. Maybe I’m just rusty at cutting up sites, but bleh.
No comments »