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:

  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!

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.

Rent Charter Buses Company
READ ALSO
JSFiddle not executing my code

JSFiddle not executing my code

I am a student and learning to codeI have downloaded this simple HTML Javascript code from internet

343
Percentage based max-height on transformed elements

Percentage based max-height on transformed elements

I have a fixed position pop up window that I transform to center in the page

323
Is there an &ldquo;Update&rdquo; function for jQuery?

Is there an “Update” function for jQuery?

if we push Html to the Dom , it will be display there but its not updatedis there any update function to jQuery ?

349
Make a UL inherit Div&#39;s min-height/height

Make a UL inherit Div's min-height/height

I am trying to make my UL tag which is inside a div to inherit the height of the div

435