Proper float css grid

Question

If I have css floated grid like this

.float {
  float: left;
  width: 45%;
  border: 1px solid black;
  margin: 1%;
  padding: 1%;
}

How can I force each new line to be aligned at same horizont level?

http://codepen.io/anon/pen/Kzezjp?editors=1100

Do you mean in rows or like this - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css — Paulie_D, Apr 19 '16 at 12:01
set min-height it will works(but any one container exceeds min-height then its collapse) — Maths RkBala, Apr 19 '16 at 12:06

score 0 · Answer 1 · answered Apr 19 '16 at 12:06

If you want each effective row to start on a new vertical level, you need to clear the floats after each 2nd div.

Codepen Demo

.float {
  box-sizing: border-box;
  float: left;
  width: 45%;
  border: 1px solid black;
  margin: 1%;
  padding: 1%;
}
div:nth-of-type(2n+1) {
  clear: left;
}

<div class="float">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
  nunc justo, efficitur eu nisl in, convallis aliquet sapien.nunc justo, efficitur eu nisl in, convallis aliquet sapien.
</div>
<div class="float">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien.
</div>

<div class="float">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
  nunc justo, efficitur eu nisl in, convallis aliquet sapien.nunc justo, efficitur eu nisl in, convallis aliquet sapien.
</div>
<div class="float">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc justo, efficitur eu nisl in, convallis aliquet sapien.
</div>

João Pedro · Answer 2 · 2016-04-19T12:04:19.163

-1

I think you want to use vertical-align and you should decrease the width:

    .float {
      float: left;
      width: 45%;
      border: 1px solid black;
      margin: 1%;
      padding: 1%;
    vertical-align:middle;
width:30%;
    }

edited Apr 19 '16 at 12:04

answered Apr 19 '16 at 12:02

João Pedro

546
1
5
19

Proper float css grid

2 Answers2