How to keep rows in the same line horizontally?

Question

Here is my code:

div{
    float: left;
    width: 30.33%;
    min-width: 150px;
    padding: 6px;
}

<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>

See? Everything is arranged and neat. All fine. But when the height of a box getting more than others, the rows will be interwoven (disordered). See:

div{
    float: left;
    width: 30.33%;
    min-width: 150px;
    padding: 6px;
}

<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever   whatever   whatever   whatever   whatever   whatever   whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>

How can I keep rows in the same line?

score 3 · Answer 1 · answered May 14 '18 at 08:52

You can use FlexBox :

.wrapper div {
  width: 30.33%;
  min-width: 150px;
  padding: 6px;
}
.wrapper{
display: flex;
flex-wrap:wrap;
}

<div class="wrapper">
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
</div>

Krzysztof Janiszewski · Answer 2 · 2018-05-14T09:14:19.687

Just add additional div for every row.

Here is an working example

.row {
  clear: both;
}

.row div {
  float: left;
  width: 30.33%;
  min-width: 150px;
  padding: 6px;
}

<div class="row">
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
</div>
<div class="row">
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
  <div>
    <h3>title</h3>
    <p> whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever
    </p>
  </div>
</div>

You could alternatively use flexbox but it is less supported than float. You can see which browsers are compatible here

why floating the row? better clear float instead of having everything floated — Temani Afif, May 14 '18 at 08:56

score 0 · Answer 3 · answered May 14 '18 at 08:52

Add display: flex; and flex-wrap: wrap; to any wrapper div around your 33.3% width divs

body {    
display: flex;
flex-wrap: wrap;
}
div{
    float: left;
    width: 30.33%;
    min-width: 150px;
    padding: 6px;
}

<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever   whatever   whatever   whatever   whatever   whatever   whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>
<div>
    <h3>title</h3>
    <p> whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever  whatever 
    </p>
</div>

score -2 · Answer 4 · answered May 14 '18 at 08:52

-2

you can either use a table / you can add one more property to you css with height of some fixed height. then this issue will be resolved.

answered May 14 '18 at 08:52

Koushik Reddy U

168
2
14

How to keep rows in the same line horizontally?

4 Answers4