0

I'm trying to create a grid layout using "float: left" but this is causing the second row to ignore the specified margin-bottom and move up directly below the first row. However, the margin between row two and three is working as expected.

I've tried using "clearfix: both" and "overflow: auto" on the row class.

    <div class="row one">
      <div class="col-1-of-2">Col 1 of 2</div>
      <div class="col-1-of-2">Col 1 of 2</div>
    </div>

    <div class="row two">
      <div class="col-1-of-3">Col 1 of 3</div>
      <div class="col-1-of-3">Col 1 of 3</div>
      <div class="col-1-of-3">Col 1 of 3</div>
    </div>

    <div class="row three">
      <div class="col-1-of-3">Col 1 of 3</div>
      <div class="col-2-of-3">Col 2 of 3</div>
    </div>     

.row {
  max-width: 114rem;
  background-color: #eee;
  margin: 0 auto;           

  &:not(:last-child){
      margin-bottom: 8rem; 
  }

  .col-1-of-2 {
    width: calc((100% - 6rem) / 2); 
    background-color: orangered;
    float: left;

    &:not(:last-child) {
      margin-right: 6rem; 
    }
  }
}

I would like the margin-bottom of 8rem to be applied between the first and second row.

cklein23
  • 93
  • 6
  • typically when it comes to floating, it's better to use padding instead of margin to increase the distance when possible. – kunambi Jun 04 '19 at 19:03
  • "clearfix" is the name of a CSS technique, not an individual CSS property. Setting `overflow:auto` should have worked. Have a look at this: https://stackoverflow.com/questions/8554043/what-is-a-clearfix – Kravimir Jun 04 '19 at 19:26

2 Answers2

0

You could make your first row display: flex;

.row {
    .one {
        display: flex;
    }

    ...
}
abney317
  • 7,760
  • 6
  • 32
  • 56
0

You can add:

.row:not(:last-child){
  width: 100%;
  float: left;
}

or:

.row:not(:last-child){
  overflow: hidden;
}
Bruria Helfer
  • 76
  • 2