Jump to content

Full Width Header and Footer Problems


wildflower
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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 by wildflower
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...