Home/ Questions/Q 4337630
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T10:58:14+00:00

i was wondering if there is anyway to float many divs with different heights

  • 0

i was wondering if there is anyway to float many divs with different heights next to each others without pushdown effect,

eg:!

|||||||  ||2|||  ||||||||
|||||||  ||||||||  ||||3||
||1||          ||||||||
|||||||        ?||||||||
||||||| ||4||||  
      |||||||||

the problem is the white space under div 2 which is because div3 is taller than div2 so it
pushed down div4 leaving ugly whitespace

code:

<div class=container>

<div class=box>1</div>
<div class=box>2</div>
<div class=box>3</div>
<div class=box>4</div>

</div>

im trying to make div .container float any number of divs inside dynamically and all borders touch each other w/o this pushdown effect,

is there any way to do it ?
i tryed jQuery Masonry plugin but could figure it out also :(..

ty very much for help

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is the standard behavior for CSS for floating elements. If you don’t want the space between (2) and (4), then you may need to float (2) and then put a div for content of (2) and another div for (4), so that they are “together” (vertically).

    And I guess it depends what you want to do and achieve. You might also want to make all divs the same height with a background or border, so that they float without the visual empty space. (but there will be space if the content inside doesn’t fill up the divs.

    Also, you might want to float 1 div, and then float (1), (2), and (3) inside of it, and then float (4) separately… but really it depends what you want to do.

    • 0