Wrap content and remove extra whitespace? - css

Question

I'm having a dilemma which is causing my website to be pretty ugly, what I'm essentially trying to do is make these tiles wrap nicely and show more tiles on one row dependent on the client's screen size.
Most of it works but it looks terrible if aligned to the center (Tiles center)
Text-align: center
Text-align: left
What I want it to look like:
http://puu.sh/d3Rpt/6d1550eaa3.png
As you can see, the left align looks more aesthetically pleasing but there is a massively ugly piece of white space, what I want to do is remove that white space or center the actual tile parent.
<div class='ioholder'>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
</div>
.ioholder
{
display:inline-block;
text-align:left;
padding:10px;
}
.imghold
{
vertical-align:top;
display:inline-block;
min-width:200px;
width:200px;
height:240px;
max-height:240px;
margin:4px;
text-align:left;
background-color:rgb(240,240,240);
border-style:solid;
border-width:1px;
border-color:rgb(175,175,175);
border-radius:2px;
}

Answer 1

This looks like a good use case for flex boxes. You can set different levels of importance to boxes so some will expand to fill blank space while others do not. There are a lot of excellent examples you can use to learn at css-tricks here http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

I am not sure I understand what you are trying to achieve so I added this to the CSS based on my understanding:
.ioholder {
display:inline-block;
text-align:center;
padding:10px;
}
.ioholder > .imghold{
float: left;
}

Answer 3

I recommend you tou use grid system, for example Yui3 Grid - http://yuilibrary.com/yui/docs/cssgrids/ - or some other grid system.
.imghold{
margin: 5px;
border: 1px solid black;
height: 100px;
}
.container{
width: 90%;
margin-left: auto;
margin-right: auto;
}
.ioholder{
width: 100%;
background-color: #eee;
}
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssgrids/cssgrids-min.css">
<div class='ioholder'>
<div class='yui3-g container'>
<div class="yui3-u-1-6"><div class="imghold">one</div></div>
<div class="yui3-u-1-6"><div class="imghold">two</div></div>
<div class="yui3-u-1-6"><div class="imghold">three</div></div>
<div class="yui3-u-1-6"><div class="imghold">four</div></div>
<div class="yui3-u-1-6"><div class="imghold">five</div></div>
<div class="yui3-u-1-6"><div class="imghold">six</div></div>
</div>
</div>
You can also use responsive grid:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssgrids-responsive/cssgrids-responsive-min.css">
and then
<div class='yui3-g-r'>
<!- ... ->
</div>