breaking containing block's width

[viktor]

Here's small dilemma. I'm customizing a service that offers header/footer areas for customization code. Anything I enter inside those is already bound by pre-set width.

I need to add a menu at the top of the browser window, which uses repeat-x for the background... from side to side of the browser. But inside containing block it is set to that width. I need menu's width to be flexible, not set width, so if visitors have different resolution it will adjust. Is there any way to break containing block's width and have menu background repeat from side to side?

I tried absolute positioning with left and top set to zero, it is still inside that block. The only thing that works right now is fixed position, but it's not scrollable. It's always there when you scroll.

Any help guys? I really don't want to guess and set width in px.

Thanks.

[X96 Web Design]

I think I know what you mean... Maybe something like this?

HTML

<div id="menu">
  <ul>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
  </ul>
</div>

CSS:

#menu {
    width:100%; /* 100% of browser window */
    background:#000 url(img) repeat-x top left; /* BG color/img */
}
#menu ul {
    margin:0 auto; /* Centers in the middle of div */
    width:900px; /* Width of rest of site */
    list-style:none; /* Remove bullet points */
    padding:0;
    margin:0;
}
#menu ul li {
    display:block;
    float:left;
}
#menu ul li a {
    float:left;
    display:block;
    padding:0 25px;
}

Hope this helps...

- Alex