Home/ Questions/Q 8628929
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T08:40:38+00:00

I know it’s difficult to understand the problem from the title, so I will

  • 0

I know it’s difficult to understand the problem from the title, so I will explain it in real example.

  1. The server generates DIVs with contents and sends to the browser.
  2. Each DIV has same class: eg. ‘.column‘.
  3. All DIVs have “almost” same height. One can be slightly taller or shorter than the other.

The goal is to force FLOAT:left all columns even if the first column above is taller than its siblings. See the below screenshot.

screenshot

In the above image you can see that Col4 is NOT under Col1 because Col1’s height is taller than its siblings’. Is there a way to force Col4 DIV be floated left under Col1 DIV?

I’m looking for a native CSS solution if possible. And I don’t need simple solution like creating 3 columns and pushing DIVs into each one.

If it’s really impossible, I would really appreciate if you could answer why Col6 is not “sticking” up to Col1?

The above can be obtained from:

.col{
  float:left;
  height:50px;
  width:130px;
  border-left: 1px solid;
  border-bottom: 1px solid;
}

.col1{
  height:60px
}

And HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="col col1">Col1</div>
  <div class="col">Col2</div>
  <div class="col">Col3</div>
  <div class="col">Col4</div>
  <div class="col">Col5</div>
  <div class="col">Col6</div>
</body>
</html>

Here is the live example in jsbin.

I would really appreciate any help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should simply be able to clear the floats:

    .col:nth-child(4) {
  clear: left;
}

    If you need to support older browsers, use this selector instead:

    .col1 + .col + .col + .col {
  clear: left;
}

    If you need your 5th and 6th columns to be flush with the bottom borders of your 2nd and 3rd columns respectively, though, you can’t achieve it with floats alone. You’ll need to find another way around it, or use something like jQuery Masonry to lay out your page.

    The only possible reason why your 6th column isn’t sticking up to your 1st column is because it’s wrapping to a new line, and according to the float model a box cannot be higher than the bottom of its preceding floated boxes.

    • 0