Jump to content
Sign in to follow this  
wildflower

Full Width Header and Footer Problems

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!

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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)

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...