100% Width Spry Navbar Workaround

[chainpin]

I want a full width navbar with the nav buttons centered on the page. I have created the navbar using Spry and wrapped it in a separate div and changed the background color to match the navbar. This is the only way I could find to get the desired 100% width effect.

I want everything to scale accordingly if a user increases the text size. The problem is that in order to get the wrapper div to fit to the size of the menu bar, I have to include overflow: hidden; in the code. This works great and everything resizes accordingly, however the overflow code means my menu drop downs don't work.

Does anyone have any suggestions on how I can get this to work? Also, is there another way to get a Spry menu bar to fit 100%? My DOCTYPE is: DTD XHTML 1.0 Transitional

Thanks for the help!

Here is the Spry CSS:

ul.MenuBarHorizontal
{
margin: auto;
padding: 0;
list-style-type: none;
font-size: 0.875em;
cursor: default;
width: 51em;
font-family: "Times New Roman", Times, serif;
}

Here is the wrapper CSS:

.oneColFixCtrHdr #navbarWrapper {
background-color: #000000;
height: auto;
width: 100%;
overflow: hidden;

Here is the HTML:

<div id="navbarWrapper">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">HOME</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">ABOUT</a>
<ul>
<li><a href="#">OUR STORY</a></li>
<li><a href="#">OUR NAME</a></li>
<li><a href="#">OUR FRIENDS</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">WINE</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">VINEYARDS</a></li>
<li><a href="#">WHAT'S NEW</a></li>
<li><a href="#">THE LIST</a></li>
<li><a href="#">ACQUIRE</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>

[appi2]

If its a fixed width design, change the 100% to em.

[chainpin]

The menu bar is fixed width because it needs a width in order to center be centered on the page. The navbar and its wrapper sits outside of the page container. Using 100% is the only way I can get the wrapper div to fit the entire screen automatically. I'm sure I must be missing some code in my CSS to get this to act properly but I'm not sure what.

[appi2]

Using 100% is the only way I can get the wrapper div to fit the entire screen automatically.

The wrapper by default will be 100% width as its a block element. So there is no need to say width:100% Unless something else is constraining its width

If you load the code you gave into a new blank page, you may see the problem i'm having trying to figure out your problem.

In your example above you have .oneColFixCtrHdr #navbarWrapper{} but I don't know what ".oneColFixCtrHdr" is or does.

If you can give a better example of your problem I may be able to help better, plus you never know you may find the problem by having to do so.