Hi everyone!
I’ve been an avid CSS-Tricks reader ever since I began designing websites. I’ve finally made a site that I’m really pumped on, and would love some help making it a liquid layout, in this case meaning that it can resize automatically to the most common screen resolutions.
The site is http://www.mybodyisaband.com
The issue is, when I was using max-height: 100% for the main image, it wouldn’t work in IE because the containing DIV would stretch to the right-side of the window. This would changing the % values of the divs that were used to trigger the “MY BODY” hover images based on the width of the window, and not the width of the max-height 100% div that contained the image. I wasn’t satisfied with using conditional statements and gobs of jquery to correct this, so I went with a different approach.
My current solution is to declare a static width of the div that contains the main image, and then have jquery change the width of that div depending on the browser height, thus changing the %’s of all of the other div’s predictably, making it a somewhat-liquid layout.
I would love any suggestions on making this website liquid, as well as any other feedback. This is my first time ever asking for feedback on a site, so if I am breaking any faux-pas on how to do this in the most tactful way, please excuse me! I am happy to provide code snippets, or any other things that may help.
