Hi All, List newbie so apologies in advance for any mis-steps. I have a problem getting my picture frames to stop swelling to the width of the container.
I've extracted the relevant part of my problem page, pulled the reqiured CSS into the same page, and put it up at http://www.camnem.com/tester/tester.html . Border colours and such are changed to make it easier to discuss. As part of a larger page I have a recent pictures section. There's a containing <div class=picspace> for this section - green background here. Each pic has a <div class=picframe> around a <img class=thumb>. The red line is the border on img.thumb. The dark green is the div.picframe padding, and the yellow line is the div.picframe border. My problem is that I want the pics in a center-aligned column with a 10px frame all around. There's no problem with this landscape image because its framed size = the size of the container. The problem is with the portrait version. I guess it's inheriting width from the container? I thought that side margins of auto on the frame would avoid this. You can see from the third image that if I float the frame (div.picframe2 is floated left) then the border is perfect. So I guess this is changing the box context somehow but I haven't figured out how to use this to achieve what I want. I can fix this by manually setting the width of the frame but this is ugly because then I need a different div for each different width (will get nasty on full album pages). Anyway, it just seems wrong to have to do this! I also saw one solution (for Firefox at least) that used some browser specific moz- display tags but I want the page to validate as clean css and html and to be pretty portable cross browsers. So .. appreciate any suggestions. Thanks & regards, Cam. ___________________________________________________________ $0 Web Hosting with up to 200MB web space, 1000 MB Transfer 10 Personalized POP and Web E-mail Accounts, and much more. Signup at www.doteasy.com ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
