Search the Community

Hi, can anyone help me solve this puzzle? I'm working on a design that uses full-width headers and footers but has fixed width content in the central framework, but it's behaving a little badly. See example: http://wildflowerpr.net/services On the surface, all seems to work fine, but when you reduce the browser window to, say, 50% of the width, there is an unwanted effect: i.e. you can scroll across to the right, and you'll see that the header and footer have been artificially 'cropped' giving a messy effect of a white space margin running down the right of the page. Not pretty! I don't want this cropping. I can kind of see what's happening, in that I'm effectively asking the browser to match the header / footer width (100%) to the width of the window, but by keeping my main content central and fixed width (1100px) it's confusing things. However, I'm not sure the best way around this. As you can see, my design has many layers and collumns, which I want to keep. Should I change my design radically? I've been reading a little about responsive / collumn based designs and wondered if I should change it. It's hard to do this with all the layers and the effects I've designed though. If it's of any relevance I'm working in Thesis 2.0 in WordPress. Appreciate any help - thanks in advance!