Full Width Header and Footer Problems

[wildflower]

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!

[divinedesigns1]

i dont see anything wrong with it, i reduce it to 50% and it still look the same, only thing that happen was the right side of the image for the content was moved, besides that everything stayed the same

[divinedesigns1]

another problem was the menu got removed from being inline, besides that i dont see any other problem

[wildflower]

You have to scroll right to see the problem - if you reduce the browser window to 50%, then scroll across to see the hidden content on the right hand side (e.g. where it says graphic design) you will see above and below the browser has cut the header in half and left a white space. The cursor arrows or mouse will work in place of the horizontal scrollbar (which I've removed)

[Ingolme]

You need to give a min-width property to those elements and give it a value equal or greater to the width of the content.

[wildflower]

Amazing! So simple but it worked right away. Thank you! Any idea how I can also address the problem of the menu being moved from position when the browser window is reduced, as pointed out above? I tried looking at minimum widths here but it didn't seem to have an effect - it is probably something simple that I am missing, I just want the menu items to stay in place and not move when the window reduces, but I think the padding is pushing them down. Thanks again - much time saved by your help.

Edited November 27, 2012 by wildflower