Background Extension Problem

[eric777]

Hello everyone,

I’m having difficulty figuring out this particular CSS problem and have not been able to find a solution anywhere online, including previous posts on this forum.

I’ve tried some wacky ideas, but nothing that I think even comes close on how to go about solving the issue.

Please refer to the attached image as I explain the situation.

What I have for the design of this website is a 960px wide main content area, represented by the gray area in the middle of the image. I have a full 100% width top bar and footer bar, represented by the black areas at the top and bottom of the image.

Now here is the issue: The blue bar represents my main menu bar. I wanted this bar to come in from the right side and then stop just over halfway past the middle mark of the 960px wide content area. However, I want this bar to extend as the browser is re-sized.

So, even if someone has a huge browser window open the proper display would be the following:

-the top bar and footer would both be spread across 100% of the window.
-the main content would be centered in the middle, using 960px width and margin: 0 auto;
-the main menu bar would extend out of the main content area all the way to the right border of the browser window.

Any ideas? I’m stumped!

Thank you all so very much in advance!

Eric

[eric777]

No I haven’t actually… I’ll give that concept a try. I’m working on the template on my local server… but I can absolutely put it online so that people can try things out.

Thanks for your reply! I’ll be sure to let you know the outcome / post a link to my current development thus far.

Eric

[eric777]

Unfortunately, that isn’t going to work as the design requires that the menu-bar remain in the same place in relation to the 960px width main content area.

Eric

[Author]

Posts