Displaying divs in rows

Question

Is there a way to align the divs inside container 3 in a row?

<div class="container">
      <div class="product"></div>
      <div class="product"></div>
      <div class="product"></div>
      <div class="product"></div>
      <div class="product"></div>
      <div class="product"></div>
      <div class="product"></div>
      <div class="product"></div>
      <div class="product"></div>   
</div>

possible duplicate: http://stackoverflow.com/q/2603700/3597276 — Michael Benjamin, Nov 08 '16 at 22:35

score 10 · Answer 1 · answered Nov 08 '16 at 22:30

Yes, and flexbox is the best way

.container {
  display: flex;
  flex-wrap: wrap;
}
.container .product {
  flex: 1 0 33%;
  height: 50px;
  border: 1px solid black;
}

<div class="container">
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
</div>

score 3 · Answer 2 · answered Nov 08 '16 at 22:31

3

.container {
  width: 100%;
}
.product {
  width:33.33%;
  background: blue;
  min-height: 100px;
  float:left;
}

<div class="container">
      <div class="product">1</div>
      <div class="product">2</div>
      <div class="product">3</div>
      <div class="product">4</div>
      <div class="product">5</div>
      <div class="product">6</div>
      <div class="product">7</div>
      <div class="product">8</div>
      <div class="product">9</div>   
</div>

answered Nov 08 '16 at 22:31

GvM

1,685
11
13

Beat me to it buddy. This is defs the way to go. – user1567453 Nov 08 '16 at 22:35
1

@user1567453 No it is not, floats are not meant for layout – Asons Nov 08 '16 at 22:37
ugh. floating. that causes all kinds of nasty problems. for example, the container will not size to the content of your floated divs. http://stackoverflow.com/questions/2442934/container-div-ignores-height-of-floated-elements – JDB Nov 08 '16 at 22:37

RizkiDPrast · Accepted Answer · 2016-11-08T22:40:55.823

1

Flexbox is come to solve that one. another (old) approach is to use display: inline-block (instead of float.)

.product {
  display: inline-block;
  width: 30%;
  height: 50px;
  border: 1px solid green;
}

<div class="container">
      <div class="product"></div>
      <div class="product"></div>
      <div class="product"></div>
      <div class="product"></div>
      <div class="product"></div>
      <div class="product"></div>
      <div class="product"></div>
      <div class="product"></div>
      <div class="product"></div>   
</div>

edited Nov 08 '16 at 22:40

answered Nov 08 '16 at 22:38

RizkiDPrast

1,695
1
14
21

Float is a terrible option. Don't use it. Inline-block is also a hack... notice that the author had to use `30%`, because `33%` would cause blocks to be 2-per-line due to the spaces between them. For modern browsers, use flex. – JDB Nov 08 '16 at 22:40
completely agree with you. Just trying to give alt. But if want to stick with inline-block and want to have same result with :height=33.3%" we can just add "margin-left: -5px;". good thing about inline-block compare to "foat" is we dont have to use clear:both after – RizkiDPrast Nov 08 '16 at 22:47
yes, it is a problem, because if i have more than 3 divs in container everything looks fine, but when I have 2 they overlap – alin dradici Nov 09 '16 at 00:38

score 0 · Answer 4 · answered Nov 08 '16 at 22:34

Bootstrap solution:

https://jsfiddle.net/e76tknpq/

<div class="row">

        <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
        <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
        <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
        </div>
<div class="row">


            <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
            <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
            <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
</div>
<div class="row">


        <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
        <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
        <div class="product col-md-4 col-lg-4 col-sm-4 col-xs-4"></div> 

</div>

CSS

.product:nth-child(even){
  background: red;
  height:180px;
}

.product:nth-child(odd){
  background: green;
  height:180px;
}

Displaying divs in rows

4 Answers4