Custom grid with Floats

Question

Why aren't my divs side by side in the block layout with floats? From what I understand, block layout takes up the whole width (I tried inline-block and inline as well but didn't work as expected, display:flex works though). But with float I believe it gets out of the block and collapses the parents height (for which I used clear). Just wanted to know how to get these divs side by side using floats.

.row {
  max-width: 1440px;
  margin: 0 auto;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

.col-1-2 {
  background-color: red;
  width: calc((100%-50px)/2);
  float: left;
}

.col-1-2:not(last-child) {
  margin-right: 50px;
}

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

See CodePen

`last-child` should have a colon `:last-child` – Gerard Mar 27 '23 at 06:46 — Gerard, Mar 27 '23 at 06:46

score 0 · Answer 1 · answered Mar 27 '23 at 08:35

You were almost there, it's only a question of syntax As said Gerard, you need :last-child You need also to put spaces in your calc I've added a clearfix class in the snippet, you can use this class in any project

.row {
  max-width: 1440px;
  margin: 0 auto;
}

.col-1-2 {
  background-color: red;
  width: calc((100% - 50px) / 2);
  float: left;
}

.col-1-2:not(:last-child) {
  margin-right: 50px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}

.clearfix:after {
  clear: both;
}

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

Thanks so much gerad and pier. it was really helpful. – Ramachandran Mar 27 '23 at 09:13 — Ramachandran, Mar 27 '23 at 09:13

Custom grid with Floats

1 Answers1