Basic CSS: having unordered list extend beyond container div?

It's been a bit since I've gotten really into CSS work, I'm trying to make a simple layout with a menubar. The idea is to have a container holding everything in the center of the screen and have a menubar (unordered inline list) that runs the full length of the screen but the list items to be contained in the container.

See this pic for a visual example

ps. I know this isn't true "programming", but thi开发者_运维百科s seemed like the most appropriate place to post this question. Let me know if there's a better /r/ for this to go.

make the ul width: 100% and the li's float: right

Edit: didn't realized you wanted ul to extend to the width of the window... kind of weird, but you can make it with javascript:

1. you make the container overflow: show
2. then with js you get the window full width (not sure how to do this right now, but it should be easy with jQuery or mootools...) and then make the ul width of that size.
3. then you set ul padding-rigth to (window_width - container_width) / 2
4. make li's float: right

I think it's impossible without javascript, unless you fix a static size for the ul (like 1600px) but I don't recommend this as it will only display alright in screens with 1600px resolution

What you're really saying is you want #container's child <ul> to break outside it's bounds, and then you want its grandchild <li>'s to respect its boundaries.

Your approach is going to be a bit messy, and I would recommend a different approach.

Personally I would go for a background image to add visual effects outside your container, but I guess it is possible with html / css:

1. Add an additional 100% width div and position that absolute so that it is outside the normal document flow
2. Put the ul in that div with a width of 1024px and auto margins
3. Float the li's right

You will probably also have to add a sort of a spacer div in your #containerto avoid content getting behind the menubar.