CODEWITHSUNDEEP
jquerycssheight
Szymon
Szymon

Reputation: 1290

tiles from up to down not from left to right in container

I would like to make tiles/thumbnails showing from up to down like this:enter image description here

When i just put tiles inside container it wont work like float:left to fit container then next line. In this case tiles ( red ) just goes outside container ( black ).

EXAMPLE ON CODEPEN

Upvotes: 1

Views: 127

Answers (2)

ProfileTwist
ProfileTwist

Reputation: 1554

If the tiles stay the same height, then you can employ this strategy. It doesn't require an extra .col tag, but it requires you to define which tag goes on top. I am at work right now, so i can not access JSfiddle. This works on IE7 so I am certain it will work (better?) in FF and other standard compliant browsers.

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
 <div class="top">6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
 <div class="top">11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
 <div class="top">16</div>
  <div>17</div>
  <div>18</div>
  <div>19</div>
  <div>20</div>
</div>

.wrapper {
    background: #f1f1f1;
    overflow: hidden;
    width: 520px;
    padding: 0 10px 10px 0;
}
.wrapper div {
    float: left;
    clear: left;
    width: 80px;
    height: 60px;
    margin: 10px 0 0 10px;
    border: 5px solid #808080;
}
.wrapper div.top {
    clear: none;
    margin-top: -310px;
}
.wrapper div.top + div {
    clear: none;
    margin-top: -230px;
}
.wrapper div.top + div + div {
    clear: none;
    margin-top: -150px;
}
.wrapper div.top + div + div + div {
    clear: none;
    margin-top: -70px;
}
.wrapper div.top + div + div + div + div {
    clear: none;
}

IE7 Rendering

Upvotes: 0

ayyp
ayyp

Reputation: 6598

You need to set a width on the container, that way it will restrict the boxes. By doing this, it allows you to set float: left; on the smaller boxes.

Edit: updated link: http://codepen.io/seraphzz/pen/boxtq

Upvotes: 1

Related Questions