1

EDIT: You can see an example in this JSFiddle.

I've inherited an old website that uses absolutely no responsive framework. Everything was done by hand, and it shows. The website was in-use until about a year ago, and now I need to revive it.

In one of the pages there are four panels that should be ordered like this:

A    B
C    D

This is done with the following style:

.panel-container {
   float: left;
   width: 48%;
   text-align: center;
   margin-bottom: 2%;
}

Up until a year ago, everything was fine. However, now when I try to display the page I get something like this:

A    B
     C
D

Only when the window is large enough (by zooming out to 70%) is the page displayed properly.

I tried changing the width in the CSS, and things became even stranger! Setting a width of 32% showed the following, as expected:

A    B     C
D

Setting the width to anything greater than 33% resulted in the problematic layout.

I'm stumped, I'm not even sure how to proceed from here, other than redoing the site with a flexbox.

zmbq
  • 38,013
  • 14
  • 101
  • 171
  • 2
    Please include a snippet of HTML to go along with the associated CSS. Display-related problems are much easier to solve with a [**MCVE**](https://stackoverflow.com/help/mcve). – Tyler Roper Jul 31 '18 at 14:50
  • can't possibly tell without seeing html. Look at the content as well; isn't there an element inside one of the boxes that pushes away something? But going flexbox would be my personal choice actually. – giorgio Jul 31 '18 at 14:50
  • Maybe refactor every page and use flex-box instead. That will save you so much time instead of fixing old code. – Dennis Jul 31 '18 at 14:51
  • 1
    duplicate of : https://stackoverflow.com/questions/15098223/floated-elements-of-variable-height-push-siblings-down – Temani Afif Jul 31 '18 at 14:54
  • 1
    I've removed the tag `flexbox`, since the question is not about that technology, but rather about `float`. – Heretic Monkey Jul 31 '18 at 15:06
  • @TylerRoper, you're right of course. I've added a JSFiddle with the relevant part from the actual code (which, I reiterate, was *not* written by me...) – zmbq Aug 01 '18 at 09:15

1 Answers1

1

This happens because your A has a bigger height:

.panel-container {
  float: left;
  width: 48%;
  text-align: center;
  margin-bottom: 2%;
  height: 100px;
}

.bigger {
  height: 200px;
}

.clearfix::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
<div class="clearfix">
  <div class="panel-container bigger">
  A
  </div>
  <div class="panel-container">
  B
  </div>
  <div class="panel-container">
  C
  </div>
  <div class="panel-container">
  D
  </div>
</div>
<hr />
<div class="clearfix">
  <div class="panel-container">
  A
  </div>
  <div class="panel-container">
  B
  </div>
  <div class="panel-container">
  C
  </div>
  <div class="panel-container">
  D
  </div>
</div>

You could simply add a clear for odd items:

.panel-container {
  float: left;
  width: 48%;
  text-align: center;
  margin-bottom: 2%;
  height: 100px;
}

.panel-container:nth-child(odd) {
  clear: both;
}

.bigger {
  height: 200px;
}

.clearfix::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
<div class="clearfix">
  <div class="panel-container bigger">
  A
  </div>
  <div class="panel-container">
  B
  </div>
  <div class="panel-container">
  C
  </div>
  <div class="panel-container">
  D
  </div>
</div>
Huelfe
  • 1,776
  • 16
  • 25
  • 1
    Wow, I'm not sure whether this is indeed the case, but real impressive! I'll give it a try shortly. – zmbq Aug 01 '18 at 07:27
  • Unfortunately this is not the case. I'll try to create an example of this. – zmbq Aug 01 '18 at 07:39
  • OK, added an example, note the JSFiddle link at the top of the question – zmbq Aug 01 '18 at 09:16
  • Yes it is as I wrote @zmbq. Have a look at this updated [fiddle](https://jsfiddle.net/8kun9d3j/3/). When you inspect the elements then you will see that the first element is less than a pixel bigger as the second one. – Huelfe Aug 01 '18 at 09:21
  • Amazing! The height looked identical to me, as I never considered looking at subpixel values. I hate CSS... – zmbq Aug 01 '18 at 10:37