CODEWITHSUNDEEP
csshtml
Tommy
Tommy

Reputation: 850

Stack divs on top of each other in 2 rows without whitespace

I really need your help on this one:

Right now I have divs just on top of each other, filled dynamically with diverse contents so the heights are changing.

What I want to do now is to place them in 2 rows. With a fixed width and "float:left" this kinda works already.

My english is not the very best so pls take a look at my example picture first:

This is how it looks like right now!

As you can see there is this whitespace because of the third div which doesn't start right beneath the first div because of div number 2 which CAN BE higher as the first div.

I now wonder if there is a possibility to automatically position those divs higher so that there is no whitespace (they always should start right beneath the picture which is above wouth the whitespace, left or right).

LIKE THIS:

It should look like this!

I hope you kinda understand what I mean :D Thanks in advance for replys!

EDIT: Code-Example:

<div id="content">
<div class="xyz">BLABLA</div>
<div class="xyz">BLABLA<br>morebla!<br>EVEN MORE BLA</div>
<div class="xyz">BLABLA</div>
</div>
<style>
#content {
width: 648px;
}
.xyz {
width: 303px;
float: left;
border:1px solid black;
}
</style>

Remeber, heights are always different!

Upvotes: 1

Views: 473

Answers (2)

abbood
abbood

Reputation: 23558

jQuery masonry makes your life a lot easier.. don't reinvent the wheel, especially when you're facing a classic css problem.

Upvotes: 2

lemil77
lemil77

Reputation: 341

this will do it...

   <div id="content">
    <div class="column1" id="left">
     <div id="div1">...</div>
     <div id="div3">...</div>
    </div>
    <div class="column2" id="left">
     <div id="div2">...</div>
     <div id="div4">...</div>
    </div>
   </div>

Then just style column2 styles by defining widht values in your css.

Thanks,

@leo.

Upvotes: 0

Related Questions