CODEWITHSUNDEEP
css
Stevob21
Stevob21

Reputation: 45

Wrap content and remove extra whitespace?

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 enter image description here

Text-align: left enter image description here

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;
}

Upvotes: 1

Views: 880

Answers (3)

robotDad
robotDad

Reputation: 26

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/

Upvotes: 1

repincln
repincln

Reputation: 2049

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>

Upvotes: 0

blurfus
blurfus

Reputation: 14031

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;
}

Upvotes: 0

Related Questions