Clearfix not working in chrome 43

Question

I've created 3 floating columns and I'm trying to use the clearfix hack, but no version of it works for me.

I'm viewing my site on Chrome 43, and it looks like this: http://screencast.com/t/Dkenkh3Jq8SD

but on firefox and ie it looks just fine.

A link to my site: http://idanmelamed.co.il/peppers-studio/

Here's my code: http://jsfiddle.net/2zaeL9tk/

HTML:

<div class="main-content group">
    <div class="column-right col">
        <img src="http://idanmelamed.co.il/peppers-studio/img/itay-guitar.jpg" alt="איתי מנגן בגיטרה">
      <p>Peppers Studio בהנהלת  איתי בכרך, בוגר רימון... זה אומר שהוא ממש מקצועי!</p>         
    </div>
    <div class="column-center col">
        <img src="http://idanmelamed.co.il/peppers-studio/img/big-f-mixer.jpg" alt="נגן גיטרה">
       <p>אולפן הקלטות מקצועי בכפר-סבא. החולמים ליצירה יוכלו לקבל שירותי אולפן והפקה מוסיקאלית מקצועיים באווירה מיוחדת.</p>
    </div>
    <div class="column-left col">
        <img src="http://idanmelamed.co.il/peppers-studio/img/double-itay.jpg" alt="Trumpet and Sax">
       <p>רוצה ללמוד לנגן על גיטרה? לימודים באווירה של אולפן הקלטות. שיעור ניסיון ראשון ב-50% הנחה!</p>
    </div>     
  </div>

CSS:

    .main-content img {
    display: block;
    margin: auto;
    max-width: 100%;
    height: auto;
  }

  .column-right { 
    float: right; 
    width: 33.3333%;
  }

  .column-center { 
    display: inline-block; 
    width: 33.3333%; 
  }

  .column-left{
    display: block;
    float: left; 
    width: 33.3333%; 
  }

  .col {
    text-align: center;
  }

  .group::after {
  content: " ";
  display: table;
  clear: both;
  }

Any ideas for how to fix this?

edit: Here are some screenshots of different browsers: http://browsershots.org/http://idanmelamed.co.il/peppers-studio/

Answer 1

As @Cbroe stated in a comment above

Unclear what you’re asking; both your fiddle and your actual site look the same in my Chrome 43 as in IE 11 and Firefox 38

I tried myself either in Chrome 43 and Firefox 38 and both look the same.

Although I noticed you are using for your .col's the float:left and float:right as well the display:inline-block which is mixing a lot when you can simplify.

Instead of this

 .column-right {
     float: right;
     width: 33.3333%;
 }
 .column-center {
     display: inline-block;
     width: 33.3333%;
 }
 .column-left {
     display: block;
     float: left;
     width: 33.3333%;
 }
 .col {
     text-align: center;
}

Here is 3 options that are simplified for you (that might fix the issue you are having - and we cannot "see")

using just float:left

 .main-content img {
   display: block;
   margin: auto;
   max-width: 100%;
   height: auto;
 }
 .col {
   text-align: center;
   float:left;
   width:33.3%
 }
 .group::after {
   content: " ";
   display: table;
   clear: both;
 }

<div class="main-content group">
  <div class="column-right col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/itay-guitar.jpg" alt="איתי מנגן בגיטרה">
    <p>Peppers Studio בהנהלת איתי בכרך, בוגר רימון... זה אומר שהוא ממש מקצועי!</p>
  </div>
  <div class="column-center col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/big-f-mixer.jpg" alt="נגן גיטרה">
    <p>אולפן הקלטות מקצועי בכפר-סבא. החולמים ליצירה יוכלו לקבל שירותי אולפן והפקה מוסיקאלית מקצועיים באווירה מיוחדת.</p>
  </div>
  <div class="column-left col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/double-itay.jpg" alt="Trumpet and Sax">
    <p>רוצה ללמוד לנגן על גיטרה? לימודים באווירה של אולפן הקלטות. שיעור ניסיון ראשון ב-50% הנחה!</p>
  </div>
</div>

using just display:inline-block

.main-content {
  font-size:0 /*fix inline-block gap*/
}
.main-content img {
   display: block;
   margin: auto;
   max-width: 100%;
   height: auto;
 }
 .col {
   text-align: center;
   display:inline-block;
   vertical-align:top; /*optional*/
   font-size:16px;
   width:33.3%
 }
 .group::after {
   content: " ";
   display: table;
   clear: both;
 }

<div class="main-content group">
  <div class="column-right col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/itay-guitar.jpg" alt="איתי מנגן בגיטרה">
    <p>Peppers Studio בהנהלת איתי בכרך, בוגר רימון... זה אומר שהוא ממש מקצועי!</p>
  </div>
  <div class="column-center col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/big-f-mixer.jpg" alt="נגן גיטרה">
    <p>אולפן הקלטות מקצועי בכפר-סבא. החולמים ליצירה יוכלו לקבל שירותי אולפן והפקה מוסיקאלית מקצועיים באווירה מיוחדת.</p>
  </div>
  <div class="column-left col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/double-itay.jpg" alt="Trumpet and Sax">
    <p>רוצה ללמוד לנגן על גיטרה? לימודים באווירה של אולפן הקלטות. שיעור ניסיון ראשון ב-50% הנחה!</p>
  </div>
</div>

using display:table-[cell]

.main-content {
  display:table;
  table-layout:fixed;
  width:100%;
}
.main-content img {
   display: block;
   margin: auto;
   max-width: 100%;
   height: auto;
 }
 .col {
   text-align: center;
   display:table-cell;
   vertical-align:top; /*optional*/
   width:33.3%
 }
 .group::after {
   content: " ";
   display: table;
   clear: both;
 }

<div class="main-content group">
  <div class="column-right col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/itay-guitar.jpg" alt="איתי מנגן בגיטרה">
    <p>Peppers Studio בהנהלת איתי בכרך, בוגר רימון... זה אומר שהוא ממש מקצועי!</p>
  </div>
  <div class="column-center col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/big-f-mixer.jpg" alt="נגן גיטרה">
    <p>אולפן הקלטות מקצועי בכפר-סבא. החולמים ליצירה יוכלו לקבל שירותי אולפן והפקה מוסיקאלית מקצועיים באווירה מיוחדת.</p>
  </div>
  <div class="column-left col">
    <img src="http://idanmelamed.co.il/peppers-studio/img/double-itay.jpg" alt="Trumpet and Sax">
    <p>רוצה ללמוד לנגן על גיטרה? לימודים באווירה של אולפן הקלטות. שיעור ניסיון ראשון ב-50% הנחה!</p>
  </div>
</div>