1

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/

Idanmel
  • 457
  • 4
  • 12
  • 1
    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. – CBroe Jun 28 '15 at 02:37
  • Hi @CBroe, thanks for commenting... Did you check my screenshot? here's how it looks on my end: http://screencast.com/t/Dkenkh3Jq8SD – Idanmel Jun 28 '15 at 02:41
  • Only way I can reproduce what your screenshot shows in Chrome is by changing the window size by dragging it to smaller dimensions – but even then, reloading the page in those small dimensions fixes the issue. – CBroe Jun 28 '15 at 02:41
  • This issue happens to me in every resolution – Idanmel Jun 28 '15 at 02:44

3 Answers3

3

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>
dippas
  • 58,591
  • 15
  • 114
  • 126
  • Thanks dippas, I floated everything right and it worked! – Idanmel Jun 28 '15 at 03:11
  • I read your answer, IMHO you are still "complicating" your code by duplicating the `width` property when you could set only to your `.col` like i did in 1st example. – dippas Jun 28 '15 at 03:14
  • Glad to help you! I just wonder why you changed my answer from accepted to not accepted. even when you said to the accepted(now) answer that it didn't fix the problem for you. – dippas Jun 28 '15 at 03:34
  • Both answers actually helped me find the solution, which was to align right, and the site is rtl. And yeah, your answer is more thorough, so, I guess I'll change the accepted answer back to yours. :-) – Idanmel Jun 28 '15 at 03:42
  • As I said I was just wondering because you marked mine as accepted first then you removed it. I was just curious :) – dippas Jun 28 '15 at 03:44
  • I wasn't really sure what the check mark does, so I just tried it out :P – Idanmel Jun 28 '15 at 04:10
1

Use float: left; on all of your image div containers.

roflmyeggo
  • 1,724
  • 16
  • 18
0

Roflmyeggo's answer gave me an angle and I found the solution...

I floated all my columns right, and the left column now stays where it's supposed to.

Basically I changed my css to this:

.column-right {  
    width: 33.3333%;
  }

  .column-center { 
    width: 33.3333%; 
  }

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

  .col {
    text-align: center;
    float: right;
  }

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

Thanks Roflmyeggo!!!

Idanmel
  • 457
  • 4
  • 12