how to vertically align HTML object to cover page

Question

I have about 10 or more objects, with same width but different height. I want to put them like the below image, to fully cover the page. Here is what i've done but it doesn't work:

http://jsfiddle.net/mhmdshv/e0xvcgnw/

HTML:

<div id="book">
<div class="book" style="height:310px; width:200px">...</div>
<div class="book" style="height:100px; width:200px">...</div>
<div class="book" style="height:500px; width:200px">...</div>
<div class="book" style="height:400px; width:200px">...</div>
 <div class="book" style="height:150px; width:200px">...</div>
<div class="book"style="height:200px; width:200px">...</div>
<div class="book" style="height:40px; width:200px">...</div>

CSS:

   body{padding:25px;}
#book{text-align:center;outline:5px solid aqua;}
.book{
    display:inline-block;

    border:1px dotted silver;background-color:pink;margin:9px;text-align:center;
}

There is a gap between objects that don't have same height... i want it to be gone. Any ideas?

Thanks!

enter image description here

take a look at css `columns` – charlietfl Oct 18 '14 at 14:40 — charlietfl, Oct 18 '14 at 14:40

score 0 · Answer 1 · answered Oct 18 '14 at 14:39

0

Do you mean something like this? demo
I added 2 divs,

.left{
    float:left;
    width:200px;
}
.right{
    float:left;
    margin-left:18px;
    width:200px;
}

answered Oct 18 '14 at 14:39

Nick

3,231
2
28
50

Yes exactly... But unfortunately i have no access to objects. I can't put them in different divisions because i use wordpress and it automatically publishes the posts. – Oct 18 '14 at 14:48

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

Actualy there is no css way to achiefe it without manipulating the dom. In your case you can add columns "left" and "right" to structure the elements to avoid the gab.

You also can use comon plugins like MASONRY

Also have a look at this answers:

How to get different height html divs to float up

CSS Floating Divs At Variable Heights

edited May 23 '17 at 10:29

Community

1
1

answered Oct 18 '14 at 14:46

Steven Web

1,966
13
23

score 0 · Answer 3 · answered Oct 18 '14 at 14:48

0

Try to discover css3 column property.
Maybe this source will help you:
http://cssdeck.com/labs/css-only-pinterest-style-columns-layout

answered Oct 18 '14 at 14:48

levon

689
6
13

score 0 · Answer 4 · answered Oct 18 '14 at 15:42

Using masonry created this:

var container = document.querySelector('#book');
var msnry = new Masonry(container, {
    // options
    columnWidth: 100,
    itemSelector: '.book',
    margin: 0 auto;
});

body {
    padding:25px;
}
#book {
    text-align:center;
    outline:5px solid aqua;
}
.book {
    width: 45%;
    border:1px dotted silver;
    background-color:pink;
    margin:9px;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>

<div id="book" class="js-masonry">
    <div class="book" style="height:310px;">...</div>
    <div class="book" style="height:100px;">...</div>
    <div class="book" style="height:500px;">...</div>
    <div class="book" style="height:400px;">...</div>
    <div class="book" style="height:150px;">...</div>
    <div class="book" style="height:200px;">...</div>
    <div class="book" style="height:40px;">...</div>
</div>

how to vertically align HTML object to cover page

4 Answers4