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.
This reply has been reported for inappropriate content.
It would be easier if you had a link so I could see your progress so far (And I would mess around with it using firebug :D )
First thing I would try is set the menu bar’s width to 65% or something. Have you tried that?