Consider Example 1 and Example 2. In Example 2, the balls are correctly displayed in two rows, while in Example 1, the balls start to appear in the wrong place with wasted space before the first ball due to a random change in the number of green balls. When the balls are in a single row, it fails; when they are in two rows, it works. Moving the border between the result and JavaScript fields so that Example 2 goes on a single line causes it to fail. Therefore, I need these balls to start at the beginning of the black border in a single row, just like they do when in two rows. The "Example" text also needs to remain in the exact position as seen in the examples.
It would be ideal if the black box could end immediately after the last ball in the row, instead of having almost a full-length of wasted space.
Check out the examples here: http://jsfiddle.net/xCG72/
HTML
<div class="container">
<span class="text-location">Example 1</span>
<div class="thesis">
<div class="box"><div class="number">134234</div></div>
<div class="box"><div class="number">2</div></div>
</div>
</div>
<div class="container">
<span class="text-location">Example 2</span>
<div class="thesis">
<div class="box"><div class="number">10</div></div>
<div class="box"><div class="number">20</div></div>
<div class="box"><div class="number">30</div></div>
<div class="box"><div class="number">40</div></div>
<div class="box"><div class="number">10</div></div>
<div class="box"><div class="number">20</div></div>
<div class="box"><div class="number">30</div></div>
<div class="box"><div class="number">40</div></div>
<div class="box"><div class="number">10</div></div>
<div class="box"><div class="number">20</div></div>
<div class="box"><div class="number">30</div></div>
<div class="box"><div class="number">40</div></div>
</div>
</div>
CSS
.number {
background-color: #37A047;
height:35px;
width:auto;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius: 100px;
border:2px;
border-style:solid;
border-color:#FFF;
float:left;
margin-right:auto;
text-align:center;
color:white;
line-height: 35px;
font-weight: bold;
font-size: 30px;
font-family: sans-serif;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
}
.thesis {
position:relative;
float:left;
top:-10px;
width:auto;
overflow: hidden;
border:2px;
border-style:solid;
border-color:purple;
}
.container {
-moz-border-radius:9px;
-webkit-border-radius:9px;
border-radius:9px;
border:2px;
border-style:solid;
border-color:black;
float:left;
width:auto;
margin-top:8px;
margin-bottom:5px;
margin-right:5px;
margin-left:5px;
padding-top:20px;
padding-right:5px;
padding-left:5px;
padding-bottom:1px;
}
.text-location {
position:relative;
left:15px;
top:-40px;
width:auto;
float:left;
z-index:10;
border:2px;
border-style:solid;
border-color:yellow;
background-color: #CCC;
text-align:left;
color:black;
line-height: 16px;
font-weight: bold;
font-size: 16px;
font-family: sans-serif;
}
.box {
width:auto;
position:relative;
float:left;
overflow:visible;
border:2px;
border-style:solid;
border-color:green;
padding-top:3px;
padding-bottom:3px;
padding-right:5px;
padding-left:5px;
margin-top:2px;
margin-bottom:2px;
margin-right:2px;
margin-left:2px;
}