expanding a unordered list to browser width (html/css)
Question
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.
1 answers
solution1
1 ACCPTED 2011-08-23 03:46:51
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Expanding a DIV with an Unordered List
List of objects to HTML unordered list
Body width is expanding even after setting its width in CSS
Unordered List, List Item, JS / HTML Question
CSS Relative background not expanding on insertion of html code
CSS and HTML: How to create an Expanding DIV On Click?
Centering li elements of an unordered list using CSS
Show submenu with CSS without using an unordered list
Html Table width with css
Expanding width and height of a <div> element with mouseover using jquery instead of css?
Related Tags