3

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

mskfisher
  • 3,291
  • 4
  • 35
  • 48
Momen Zalabany
  • 33
  • 1
  • 3
  • it's definitely doable with [jQuery Masonry](http://desandro.com/resources/jquery-masonry/) plugin. What have you tried and didn't work? – ifaour Apr 17 '11 at 12:00
  • 1
    **[See this highly relevant answer of mine.](http://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights/5234858#5234858)** You're going to have to figure out jQuery Masonry. – thirtydot Apr 17 '11 at 13:40
  • Is it only me that's seeing green between the black bars? – acme Mar 08 '12 at 13:36

3 Answers3

1

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.

nonopolarity
  • 146,324
  • 131
  • 460
  • 740
  • What is want is be able to push any amount of boxs inside my page main divs,
    im creating a small cms for my new web, and i want it to get all stored boxs in this page and wrap them in
    .
    it was easy to do so in side bar cause its 1colum contain all boxs but problem with div=content is some pages have 2 boxs = 2 columns and other pages have 20box (20% width each) that gives me 5 columns X 4 rows of boxs all diff in height but same width.
     – Momen Zalabany Apr 18 '11 at 15:47
1

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.

thecodeparadox
  • 86,271
  • 21
  • 138
  • 164
  • 1
    thank you very much :). floating to other side works great but only one problem is i dont wana edit div manual.
    because i generate divs dynamically     – Momen Zalabany Apr 17 '11 at 15:22
1

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.

petiar
  • 1,047
  • 2
  • 14
  • 31