Adjusting horizontal navigation padding with fluid container using CSS or jQuery
===

I am currently building a site with a fluid layout. None of the mainstream fluid templates out there actually come with a stock horizontal navigation that can adjust itself as the window is resized or loads at different widths.

I've been pouring through online tutorials and other Stack Overflow solutions that try to tackle similar problems, some are extremely clever and come really close but none are able to handle a block-like hover effect `a {display:block padding:10px 40px;}
a:hover {background:#ccc;}`.

I've given up on doing this with CSS, maybe someone else has a solution for handling a variable padding, or something that acts very close to that. In any case, I decide to try to work on it in jQuery.

I have never actually written any jQuery before but have worked with several plugins for years. I thought I should at least try to come up with something before posting. I have it working, **I am wondering is it possible to add the ability for it to adjust on the fly if the user resizes the window, not just on page load**. I am also wondering if there is anything wrong with they way I have done it.

Here is a link to where I've gotten to: http://jsfiddle.net/XZxMc/3/

The HTML

    <div class="container">
        <div class="row">                        
            <div class="twelvecol">
                <ul>
                    <li><a href="#">short</a></li>
                    <li><a href="#">longer</a></li>
                    <li><a href="#">even-longer</a></li>
                    <li><a href="#">really-really-long</a></li>
                    <li><a href="#">tiny</a></li>  
                </ul>               
            </div>
        </div>
    </div>

The CSS

    .container {
        background:#ccc; 
        font-family:arial, helvetica;
        }
    
    .row {
        width: 100%;
        max-width: 700px; 
        min-width: 600px; 
        margin: 0 auto;
        overflow: hidden;
        background:white;
        }
    
    .row .twelvecol {
        width:100%; 
        float:left;
    }
    
    ul {
        text-align:center;
        }
    
    ul li {
        display:inline-block;     
        zoom:1; 
        *display: inline;
        }
    
    ul li a {
        padding:12px 39px;
        display:block;
        }
    
    a {text-decoration:none;}
    a:hover {background:blue; color:white;}

​​The js

    // Initial left/right padding of links set in css
    var paddingIni = 39;
    // Initial max-width of .row
    var widthIni = 700; 
    // Number of links multiplied by 2; 2 because we will be reducing the padding by multiples of 2px total, 1px left, 1px right
    var linkQ = 5*2; 
    
    // Current width of link container
    var twelveWidth = $(".row .twelvecol").width(); 
    // (Initial width / 10) - (Current width / 10); this gives us how much to subtract from our inital padding of 39
    // Is there anything wrong with the way this is written?
    var paddingSub = (widthIni/linkQ)-(twelveWidth/linkQ); 
    // Simply subtracting above computation from our inital padding of 39
    var paddingNew = paddingIni-paddingSub;
    
    $("ul li a").css("padding-left",paddingNew);
    $("ul li a").css("padding-right",paddingNew);

Also, if someone wouldn't mind explaining why this doesn't work, it's my attempt to do it all in one equation:

    var whyisthiswrong = 39 - ( (700/(5*2)) / ($(".row .twelvecol").width()/(5*2)) );

Thanks for having a look!