<ul> Wrapper Width

[justinbriggs1]

Hey everyone, this has been bugging me for awhile, probably something simple that I am missing but I can't seem to find it.I need a wrapper div to expand as I add <li> elements to it, but it doesn't want to cooperate, it just sits there at the same fixed width. The page in question is:http://www.summerforkids.com/dev/zen/and the element is called #navCatTabsWrapper, here is the code for that one:#navCatTabsWrapper{margin: 220px 0 0 265px;background-color:#ffffe0;color: #492c0c;}Why does the wrapper div not conform to the size of the <ul>? Any help would be appreciated. Thanks,JW

[jlhaslip]

there is a specific width of 575px involved.

[Ingolme]

Why do you have so many <div> elements around the list?

<div id="navCatTabsWrapper"><div id="navCatTabs"><ul>  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=4&zenid=0387a6260909c00cdfb6030eedd09abc">Bath</a> </li>  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=5&zenid=0387a6260909c00cdfb6030eedd09abc">Bedding</a> </li>  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=9&zenid=0387a6260909c00cdfb6030eedd09abc">Diaper Bags</a> </li>  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=7&zenid=0387a6260909c00cdfb6030eedd09abc">Eat</a> </li>  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=6&zenid=0387a6260909c00cdfb6030eedd09abc">Furniture</a> </li>  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=10&zenid=0387a6260909c00cdfb6030eedd09abc">Gifts & Accessories</a> </li>  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=8&zenid=0387a6260909c00cdfb6030eedd09abc">Mattresses</a> </li>  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=3&zenid=0387a6260909c00cdfb6030eedd09abc">Play</a> </li>  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=2&zenid=0387a6260909c00cdfb6030eedd09abc">Wear</a> </li></ul></div></div>

I don't think you need either of them, you can make it like this:

<ul id="navCatTabs">  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=4&zenid=0387a6260909c00cdfb6030eedd09abc">Bath</a> </li>  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=5&zenid=0387a6260909c00cdfb6030eedd09abc">Bedding</a> </li>  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=9&zenid=0387a6260909c00cdfb6030eedd09abc">Diaper Bags</a> </li>  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=7&zenid=0387a6260909c00cdfb6030eedd09abc">Eat</a> </li>  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=6&zenid=0387a6260909c00cdfb6030eedd09abc">Furniture</a> </li>  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=10&zenid=0387a6260909c00cdfb6030eedd09abc">Gifts & Accessories</a> </li>  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=8&zenid=0387a6260909c00cdfb6030eedd09abc">Mattresses</a> </li>  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=3&zenid=0387a6260909c00cdfb6030eedd09abc">Play</a> </li>  <li><a class="category-top" href="http://www.summerforkids.com/dev/zen/index.php?main_page=index&cPath=2&zenid=0387a6260909c00cdfb6030eedd09abc">Wear</a> </li></ul>

And then condense all the CSS to adapt to it:

#navCatTabs {  text-align: center;  padding:  0.5em 1em;  list-style-type: none;  text-align: left;  margin: 220px 0 0 375px;  background-color:#ffffe0;  color: #492c0c;}#navCatTabs li {  display: inline;}#navCatTabs ul li a {  text-decoration: none;  padding: 0em 0.3em;  color: #492c0c;  white-space: nowrap;}#navCatTabs li a:hover {  color: #FF80C0;  text-decoration: underline;}

The <ul> element is a container just like a <div> is, except that it has semantiv value. You can give it an ID and style it without needing to put it inside another container.