CODEWITHSUNDEEP
javascriptjqueryhtmlcss
rookie
rookie

Reputation: 23

expanding a unordered list to browser width (html/css)

What I am trying to do is have a ul list that displays products. The width is 100% of the window. So the wider the browser window, the more products per row the user will see. As the browser gets smaller, there are less products per row. The problem I am having is that I get this white space on the right of the browser if the space between the edge of the window is slightly less then the container of the product, What I want is the row to space out evenly towards the edge if it cannot fit another product on that row.

Here is the code I have:

<!DOCTYPE HTML>


<html>
<head>
    <meta charset="UTF-8" />
</head>

<body>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
$(window).resize(function() {
    var windowWidth = $('#prodGrid').width();
    var prodGridWidth = $('#prodGrid li').width();
    var numOfUnits =  windowWidth/prodGridWidth;
    var remainder = windowWidth%prodGridWidth;
    var widthWithRemainder = prodGridWidth+remainder + "px";
    if(numOfUnits > 5 && numOfUnits < 7)
    {
        $('#prodGrid li').css('min-width',widthWithRemainder);
    }
});
</script>
<style type="text/css">
#prodGrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
}

#prodGrid li {
    float: left;
    margin: 0;
    padding: 0;
    min-width: 165px;

}

.prodGridWidth {
    width: 10%;
}

.searchImageContainer {
    height: 350px;
    width: 140px;
}

.right {
    width: 100%;
}
</style>




    <table id="searchContainerTable">
        <tr>
            <td class="right">
                <ul id="prodGrid">


    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>



    <li class="prodGridWidth">
    <div class="searchImageContainer">
        <div id="loadarea" class="image">

            <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRm4NX4YZe6OUhOB-0xT0rOOJ-iiYf3fO1x1dW0FW4dXlu5UPQO" border="0" alt="Item" width="115" height="174" />
        </div>
        <div class="swatch">
        </div>
        <div class="productName"><a class="productName" href="">Item</a></div>
        <span class="price">Price: </span><span class="priceRange">$369 - $659</span>
        <div class="ratings"><div class="rating">Rating: </div><div class="starRating35"></div></div>

        <div id="clear"></div>
    </div>
    </li>

                </ul>
            </td>
        </tr>
    </table>
</body>

</html>

To give you an idea of what I am trying to do: http://www.overstock.com/Home-Garden/Art-Gallery/216/dept.html

You can make your browser thinner/wider and see how the rows behave (what I am trying to do), and then compare it to my code.

Upvotes: 2

Views: 528

Answers (1)

Leonid
Leonid

Reputation: 3171

Try that inside resize handler

var windowWidth = $('#prodGrid').width();
var prodGridWidth = 165 + 5;
var numOfUnits =  windowWidth / prodGridWidth;
var width = windowWidth / Math.floor(numOfUnits)
$('#prodGrid li').css('width', width - 5 + 'px');

And sometimes you can get away with display: inline-block and text-align: justify, like

<html>
    <head>
        <style>
            .products { text-align: justify; height: 54px; overflow: hidden }
            .product { display: inline-block; width: 50px; height: 50px; border: 1px solid blue; margin: 1px }
        </style>
    </head>
    <body>
        <div class="products">
            <div class="product"></div>
            <div class="product"></div>
            <div class="product"></div>
            <div class="product"></div>
            <div class="product"></div>
            <div class="product"></div>
            <div class="product"></div>
        </div>
    </body>
</html>

Upvotes: 1

Related Questions