0

How do I go about fixing the clearfix not working after "Bluebox", I don't want to create a new dif, I want to use :after or ::After to inject the code/clear after blue. The clear: both commands will work if I just throw it under orange box, but can I just have it happen after bluebox with no div?

#wrapper {
  background: #000000;
  height: 960px;
  padding 20px;
}

#bluebox {
  background: blue;
  float: left;
}

#bluebox:after {
  content: '';
  display: block;
  clear: both;
}

#orangebox {
  background: orange;
  float: left;
}

#greenbox {
  background: green;
  float: left;
}

.box {
  height: 100px;
  width: 100px;
}
<div id=wrapper>
  <div id=bluebox class=box></div>
  <div id=orangebox class=box></div>
  <div id=greenbox class=box></div>
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
Trey
  • 17
  • 5
  • Why not add `clear: left;` to `#orangebox`? – j08691 Aug 15 '20 at 23:06
  • Well, I was doing that but I was watching this one guy do a youtube video, he was showing how to clear with CSS, and basically he was doing it the :after way. I just thought that'd be the best way, but clear: left still works. I just wanted to know how or why it's not working. – Trey Aug 15 '20 at 23:08

2 Answers2

0

Using floats and clearing them is sooo last decade - you should investigate a more current approach to layout - eg - flex which allows the same layout as you have it without the hassle of clearing floats.

Note that I added display: flex and justify-content: flex-start to the code - all this does is allow the flexbox layout and starts the layout from the left (if you do flex-end - then it will align the boxes to the right).

#wrapper {
  background: #000000;
  height: 960px;
  padding 20px;
  display: flex;
  justify-content: flex-start;
}

#bluebox {
  background: blue;
}

#orangebox {
  background: orange;
}

#greenbox {
  background: green;
}

.box {
  height: 100px;
  width: 100px;
}
<div id=wrapper>
  <div id="bluebox" class="box"></div>
  <div id="orangebox" class="box"></div>
  <div id="greenbox" class="box"></div>
</div>
gavgrif
  • 15,194
  • 2
  • 25
  • 27
0

The :after style is called 'clearfix' and is used for making a container of floated elements size to contain them rather than collapsing.

If you want the orange box below the blue box add the clear to the orange box as suggested already.

k123
  • 418
  • 2
  • 5