How to make width of navigation auto, while absolutely positioning its wrapper

Question

Here is my CSS:

    <style>

ul, ol, dl {    padding: 0;
    margin: 0;
}

         #navWrapper {
            background:#3C6;
            height: 90px;
            float: left;
            position: relative;
            width: 600px;
        }


        #nav {
            margin: 0 0 0 0;
            padding: 0;
            list-style: none;
            background-color: #f2f2f2;
            border-bottom: 1px solid #ccc; 
            border-top: 1px solid #ccc; 
            position: absolute;
            bottom: 0;
            }

        #nav li {
            float: left;
            list-style-type: none;
            }

        #nav li a, #nav a:visited {
            display: block;
            padding: 8px 15px;
            text-decoration: none;
            font-weight: bold;
            color: #069;
            border-right: 1px solid #ccc; }

        #nav li a:hover, #nav a:active, #nav a:focus {
            color: #c00;
            background-color: #fff; }

    .clearfloat { 
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }

    #wrapper {
        width: 965px;
        background: #FFFFFF;
        margin: 0 auto;
    }

    a img { 
        border: none;
        float: left;
    }



    </style>

Here is my HTML:

<div id="wrapper">
<div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="300px" height="90px" id="Insert_logo"/></a> 
   <div id="navWrapper">
   <div id="nav">
      <ul class="nav">
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
    </ul>
  <!-- end #nav --></div>
  <!-- end #navWrapper --></div>
    <!-- end .header --></div>
    <div class="clearfloat"></div>
    </div>

I am trying to create a navigation bar that sits on the bottom of its wrapper. The only way I can think to do this is using absolute positioning and setting the bottom to 0. But the problem is I have to set a width the div inside of the wrapper, which is what my code reflects now. I want the width to be dynamic and change with the width of the navigation bar while it still sits on the bottom of the wrapper, aligned to the bottom of the header image. How can I do this?

Answer 1

You can set #nav to 100% width, and the four items to 25% width each.

fiddle

If you mean something else, leave a comment.

---

Here are the exact changes I made.

#nav {
   width: 100%; /* Add: */ 
}

#nav li {
   width: 25%; /* Add: */ 
}

---

Based on the fiddle you provided, the left float on the navWrapper is causing problems. Removing it hides the logo, which is floated left. To fix this, put a clearfix before the navWrapper, and after the logo image.

updated fiddle