Clearfix not working with a fixed width column

343

January 11, 2017, at 12:18 PM

I am new to Bootstrap and I am having a problem with clearfix. I am trying to design a website with 3 content columns (of variable height) and a 4th column with a fixed width for advertising.

<div class="container-fluid">
   <!-- ad column with fixed width 300px -->
   <div class="col-fixed-width"></div>
   <!-- content columns -->
   <div class="col-md-4"></div>   
   <div class="col-md-4"></div>  
   <div class="col-md-4"></div> 
   <div class="clearfix"></div>
   <div class="col-md-4"></div>  
   <div class="col-md-4"></div>  
   <div class="col-md-4"></div> 
</div>

The class col-fixed looks like this:

.col-fixed {
    width: 318px;
    float: right;
}

Everything else is standard bootstrap. Because the height of my advertising column is much larger than the height of the content elements there is a large gap between the first and second row. How do I solve this? Can I either:

Ignore specific divs in regard to the use of clearfix?
use a different grid layout?

Thanks in advance for any help or hint!

Answer 1

Ok, I solved my problem. This did the trick:

.col-fixed {
  width: 160px;
  float: right;
}
.contentrow {
  width:calc(100% - 160px);
  float: left;
}
.contentcol {
  padding-left: 2px;
  padding-right: 2px;
}

I still have an advertising column with a fixed width. But I added float: left; to my content column.

See: https://jsfiddle.net/tprarmjc/1/

However I cannot explain why it solved the problem? Maybe someone can explain it to me.