0

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:

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

Thanks in advance for any help or hint!

LecheDeCrema
  • 392
  • 5
  • 21
Ricardo
  • 3
  • 1
  • Please create a snippet with the full css :) after doing that your problem is much better to understand and to solve. – Martin P. Dec 06 '16 at 08:59
  • A fiddle to a question is like a bible to a priest. They both don't make sense without their counterparts. ;) – nashcheez Dec 06 '16 at 09:01
  • Ok, I am sorry. Here is the fiddle https://jsfiddle.net/eosvk7nm/1/ Please see the HTML comments for any further description of my problem. – Ricardo Dec 06 '16 at 23:44
  • Is there really no solution to my problem? Anyone? I can't get it to work by myself... – Ricardo Dec 12 '16 at 00:03

1 Answers1

0

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.

Ricardo
  • 3
  • 1