CODEWITHSUNDEEP
jquerycsscss-floatpush
Momen Zalabany
Momen Zalabany

Reputation: 33

Css Float problem, different height divs

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

Upvotes: 3

Views: 3893

Answers (3)

petiar
petiar

Reputation: 1087

I wrote a simple jQuery script which does the trick. It even work for variable width container/page, so you dont need to enclose rows into separate containers. Lets have a look and let me know if that's what you need:

http://demo.petiar.sk/smartfloat/

Thanks, Petiar.

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

Check this out. This may solve your problem:

<div id="container" style="height:300px;width:308px;background:#ddd;border:1px solid red;float:right"">
  <div class="box" style="height:175px;width:100px;background:#CF9;border:1px solid #C0C;float:right">3</div>
  <div class="box" style="height:150px;width:100px;background:orange;border:1px solid #404040;float:right">2</div>
  <div class="box" style="height:300px;width:100px;background:green;border:1px solid yellow;float:left">1</div>
  <div class="box" style="height:145px;width:100px;background:blue;border:1px solid #F03;float:right">4</div>
</div>

Here I used colors and borders for visual aid.

Upvotes: 1

nonopolarity
nonopolarity

Reputation: 150976

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.

Upvotes: 1

Related Questions