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.