0

I was trying to do swim lanes but it doesnt work when using float. According to w3schools it should work regardless of type.

Here's my fiddle

And the code from above fiddle, html...

<div>
  <div class="table-row">
    <div class="float">1</div>
    <div class="float">2</div>
    <div class="float">3</div>
  </div>
  <div class="table-row">
    <div class="float">1</div>
    <div class="float">2</div>
    <div class="float">3</div>
  </div>
  <div class="table-row">
    <div class="float">1</div>
    <div class="float">2</div>
    <div class="float">3</div>
  </div>
</div>
<br/>
<br/>
<div>
  <div class="table-row">
    <div class="table-cell">1</div>
    <div class="table-cell">2</div>
    <div class="table-cell">3</div>
  </div>
  <div class="table-row">
    <div class="table-cell">1</div>
    <div class="table-cell">2</div>
    <div class="table-cell">3</div>
  </div>
  <div class="table-row">
    <div class="table-cell">1</div>
    <div class="table-cell">2</div>
    <div class="table-cell">3</div>
  </div>
</div>

css...

.table-row {
  clear: both;
}

.table-row:nth-child(odd) {
    background-color: rgb(200,203,207);
}

.float {
    float: left;
}

.table-cell {
    display: table-cell;
}

EDIT:

I've tried, in the fiddle, the overflow auto and clear fix classes as per the "This question already has an answer" answers. None of them work.

TedTrippin
  • 3,525
  • 5
  • 28
  • 46
  • The background-color property is working fine as always. Your `.table-row` elements simply don’t have any height any more - _because_ all children have been floated. – misorude Aug 29 '19 at 10:04
  • I've tried using the "clearfix" suggestions but they aren't working. – TedTrippin Aug 29 '19 at 10:43
  • Well then you most likely simply didn’t manage to apply them correctly … For example the version using `overflow:hidden` works quite fine, https://jsfiddle.net/rmhgst20/ – misorude Aug 29 '19 at 10:47

0 Answers0