My goal is to arrange 10 boxes horizontally on a webpage. Each box must have a minimum width of 150px and a maximum width of 299px. The challenge is to fit as many boxes as possible across the page without any gaps, ensuring that each box has an equal width (adjusting by a pixel if necessary due to rounding).
For example: If the page width is 660px, we should use 4 boxes at 165px width. If the page width is 600px, we should use 4 boxes at 150px width. If the width is 597px, then 3 boxes at 199px width should be used, since a box cannot go under 150px.
The remaining boxes at the bottom should also have the same width as the ones above.
I am looking for a way to achieve this layout. I have shared a sample fiddle link here: http://jsfiddle.net/CD4f2/1/
Please note the gap on the right side of the rows of boxes in the current setup.
I am constrained to use the following code:
<body>
<div id="mainPage">
<div id="bar">Width of a row of boxes should match the length of this bar.</div>
<div id="capTable">
<div class="cap" id="cap0">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap2">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap4">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap6">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap8">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
</div>
</div>
body
{
background-color:black;
}
.cap
{
background-color: red;
float: left;
height: 150px;
max-width: 299px;
min-width: 150px;
}
.capImage
{
background-color:blue;
float: left;
height: 37px;
width: 37px;
}
#bar
{
background-color: orange;
}
#cap0, #cap2, #cap4, #cap6, #cap8
{
background-color: green;
}
#mainPage
{
margin: 0 auto;
max-width: 800px;
min-width: 150px;
}
I have tried using tables and various combinations of floats, displays, and overflows but faced the same issues with gaps. I am considering manually specifying different resolutions in CSS, although an automated solution would be preferable if achievable.
I prefer not to resort to Javascript unless absolutely necessary, as I believe I can handle it myself.
Your insights and suggestions are appreciated. Thank you.