Here is the issue I'm facing (notice how the yellow tiles are overflowing):
(view image here) because my reputation points are not enough.
The screenshot above illustrates how the small yellow rectangles are extending beyond the boundaries of the grey box.
I would like the tiles to behave as shown in the simulated screenshot below:
(view image here) due to insufficient reputation points.
In essence, I want the dynamically generated JavaScript tiles to automatically conform to the limits of their parent container and shift down to a new row instead of overflowing.
These tiles are coded as follows:
<span class='tile'>Tile content</span>
...and they are created using JavaScript.
The tiles are placed within a div:
<div id="conversionPanel" class="panel">
<span class='tile'>Tile1</span>
<span class='tile'>Tile2</span>
<!-- additional tiles can vary in number -->
</div>
The CSS for the conversionPanel is simple: margin: 0 auto; width: 500px;
The CSS styles applied to the tiles are:
.tile {
display:inline;
padding:5px;
margin:3px;
border:1px solid white;
/* Additional visual effects in css3 */
}
If anyone could assist me with this problem, I would greatly appreciate it. I have searched extensively but haven't found a solution yet.