Floating different height divs [duplicate] - css

Question

i am using left floating DIVs to simulate a two column layout (each div contains textfield to edit different data, like name, hobbies,...). So it should look like this
1 2
3 4
5 6
Now my div-boxes aren't always the same, since some DIVs have more elements than the other ones. Now my layout looks likes this
1 2
2
3 4
5 6
You can also see the effect on this example if you scale your so that only four or three colums are shown. E.g. if 4 columns are shown in a row there is much space between Float 1 and Float 6. This doesn't look good on my UI. What I want is to have Float 6 following Float 1 with no space in between (except the margin I define)
Edit: My DIVs basically just contain a float:left and a width:40%, so that two fit on a screen
Here's a screenshot showing more

Answer 1

Here is a pure CSS solution. I took this example
Check it out if you want to learn more. He also use jQuery Masonry as fallback.
CSS:
.masonry { /* Masonry container */
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
.item { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
HTML:
<div class="masonry">
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
<div class="item">Incidunt sit unde minima in nostrum? Incidunt sit unde minima in nostrum?</div>
<div class="item">Ducimus, voluptates, modi, delectus animi maiores consequuntur repellat quisquam fugiat eum possimus enim culpa totam praesentium magni quae!</div>
<div class="item">Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.</div>
<div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
<div class="item">Incidunt sit unde minima in nostrum?</div>
<div class="item">Incidunt sit unde minima in unde minima in unde minima in nostrum?</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, praesentium consequatur ducimus commodi quam ex illo omnis dicta reiciendis vel nesciunt deserunt aut sequi nam mollitia perferendis ipsam possimus temporibus!</div>
<div class="item">Ab, adipisci, temporibus eaque quis harum perferendis incidunt cupiditate doloribus dolor numquam voluptates ipsum dolore aspernatur et voluptate ipsam beatae animi culpa.</div>
</div>
Hope this will help you. Thanks.

Answer 2

The jQuery Masonry plugin will do exactly what you want.
If you wanted to stick with pure CSS, you could do something like the following, but I don't think it's what you're going for:
<div class="col">
<div class="one"></div>
<div class="three"></div>
<div class="five"></div>
<div class="seven"></div>
</div>
<div class="col">
<div class="two"></div>
<div class="four"></div>
<div class="six"></div>
<div class="eight">who do we appreciate</div>
</div>
And the CSS:
.col {
float: left;
width: 200px;
}

Answer 3

if you can use php, here is little trick ;)
<?php
$dir = "your/images/dir/";
$img = scandir($dir); // read images to array, or make script which read it from db
unset($img[0], $img[1]); // remove unnecessary ;)
$columns = 5; // define how many columns you want to use
$margin = 5; // define page margin and margin between images in %
// create columns..
for ($c = 0; $c < $columns; $c ++)
{
$main_counter = 0;
foreach ($img as $file)
{
if ($main_counter % $columns == $c)
{
$column[$c][] = $file;
}
$main_counter ++;
}
}
?>
<! -- show images -->
<div style="margin: <?php echo $margin; ?>%;">
<?php
foreach ($column as $key => $data)
{
?>
<div style="float: left; width: <?php echo (100 / $columns); ?>%;">
<?php
foreach ($data as $image)
{
?>
<div style="margin-bottom: <?php echo $margin; ?>%; margin-right: <?php echo $margin; ?>%; background-image: url(<?php echo $dir . $image; ?>); background-size: cover;"><img src="<?php echo $dir . $image; ?>" style="visibility: hidden; width: 100%;"></div>
<?php
}
?>
</div>
<?php
}
?>
</div>
maybe help you ;)
working demo on http://www.showcase.glirp.sk/