CODEWITHSUNDEEP
htmlcss
juan fran
juan fran

Reputation: 359

stack vertically divs when using float

I am trying to stack divs vertically using float: left.

But they stack horizontally by default.

Any solution using css?

This is what i want to get:

> +-----+-----+-----+
> |  1  |  6  |  11 |
> +-----+-----+-----+
> |  2  |  7  |  12 |
> +-----+-----+-----+
> |  3  |  8  |  13 |
> +-----+-----+-----+
> |  4  |  9  |  14 |
> +-----+-----+-----+
> |  5  |  10 |  15 |
> +-----+-----+-----+

This is what i get:

> +-----+-----+-----+
> |  1  |  2  |  3  |
> +-----+-----+-----+
> |  4  |  5  |  6  |
> +-----+-----+-----+
> |  7  |  8  |  9  |
> +-----+-----+-----+
> |  10 |  11 |  12 |
> +-----+-----+-----+
> |  13 |  14 |  15 |
> +-----+-----+-----+

An image of the div that I want to rearrange: An image of the items that I want to rearrange

Each div contains a number, an image and a name. this is the code for the div:

#championsWrapper {
    float: left;
    width: 180px;
}

Upvotes: 0

Views: 61

Answers (3)

David Thomas
David Thomas

Reputation: 253506

I'd suggest using CSS columns, using column-count (and the various vendor-prefixes for this property):

#container {
  -moz-column-count: 3;
  -ms-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}
#container div {
  background-color: #fff;
}
#container div:nth-child(odd) {
  background-color: #ccc;
}
<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
  <div class="item">19</div>
  <div class="item">20</div>
  <div class="item">21</div>
</div>

If required you can use the column-rule property to add vertical lines to visually separate the columns, using the same syntax as the border property (column-rule-width column-rule-style column-rule-color):

#container {
  -moz-column-count: 3;
  -ms-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -moz-column-rule: 2px solid #999;
  -ms-column-rule: 2px solid #999;
  -webkit-column-rule: 2px solid #999;
  column-rule: 2px solid #999;
}

#container div {
  background-color: #fff;
}

#container div:nth-child(odd) {
  background-color: #ccc;
}
<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
  <div class="item">19</div>
  <div class="item">20</div>
  <div class="item">21</div>
</div>

And, of course, adjust the gutters between the columns, using column-gap:

#container {
  -moz-column-count: 3;
  -ms-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -moz-column-rule: 2px solid #999;
  -ms-column-rule: 2px solid #999;
  -webkit-column-rule: 2px solid #999;
  column-rule: 2px solid #999;
  -moz-column-gap: 3em;
  -ms-column-gap: 3em;
  -webkit-column-gap: 3em;
  column-gap: 3em;
}
#container div {
  background-color: #fff;
}
#container div:nth-child(odd) {
  background-color: #ccc;
}
<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
  <div class="item">19</div>
  <div class="item">20</div>
  <div class="item">21</div>
</div>

References:

Upvotes: 1

Nutshell
Nutshell

Reputation: 8537

You can use columns like this

#champions { 
  -webkit-columns: 3;
  -moz-columns: 3;
  columns: 3;
}

Upvotes: 1

Wowsk
Wowsk

Reputation: 3675

Just use display:inline-block on all of the divs like so.

.champion-wrapper{
  width:150px;
  display:inline-block;
}
<div class="champion-wrapper">1</div>
<div class="champion-wrapper">2</div>
<div class="champion-wrapper">3</div>
<div class="champion-wrapper">4</div>
<div class="champion-wrapper">5</div>
<div class="champion-wrapper">6</div>
<div class="champion-wrapper">7</div>
<div class="champion-wrapper">8</div>
<div class="champion-wrapper">9</div>
<div class="champion-wrapper">10</div>

Upvotes: 1

Related Questions