I am facing an issue with a div element that has multiple children. My goal is to have the children neatly fit to the bottom left of the grid when the window expands, utilizing the next available space efficiently. However, as the div expands with the window, it creates unnecessary extra room on the right side before adding another column. I am struggling to center the div while keeping the content floating left and ensuring that the div is only as wide as necessary for the content.
.wrapper{
display:inline-block;
width:auto;
text-align:center;
border:solid black 5px;
margin:10px auto;
}
.wrapper > *{
margin: 0 auto;
border:solid black 1px;
text-align:center;
display:inline-block;
float:left;
width:150px;
height:150px;
margin: 0px 10px 10px 10px;
}
Despite trying various combinations of block elements and inline-block elements, I have not been able to find a solution.
I apologize if my explanation was unclear, but it may make more sense when looking at the provided code in the fiddle.