Vertical align is not working

Question

I have more than 3 child nodes and a single parent div. I want to align the div like a bricks. But the div is not positioning properly. The child's consuming unwanted space at bottom in between two div's.

Each child div have different heights, so display: flex property is not effective in the parent. Also tried with column-count property in the parent div and it's not working properly in chrome.

See the Demo

.container {
  border: 1px black solid;
  overflow: hidden;
  vertical-align: top;
}

.small {
  float: left;
  width: 100px;
  border: 1px black solid;
  background: aliceblue;
}

<div class="container">
  <div class="small">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</div>
  <div class="small">It has survived not only five centuries.</div>
  <div class="small">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
  <div class="small">more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</div>
  <div class="small">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical.</div>
  <div class="small">Latin literature from 45 BC, making it over 2000 years old.</div>
  <div class="small">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.</div>
</div>

Make use of `flexbox`. Try it using https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Abin Thaha, Sep 06 '17 at 06:55
I don't think this is possible with float at least if you want with fully dynamic way. — golddragon007, Sep 06 '17 at 07:08

score 1 · Answer 1 · edited Sep 06 '17 at 09:12

1

You can use CSS-Masonry layout. See this link: http://w3bits.com/css-masonry/

edited Sep 06 '17 at 09:12

Paolo Forgia

6,572
8
46
58

answered Sep 06 '17 at 07:18

bellabelle

908
7
13

score 0 · Answer 2 · answered Sep 06 '17 at 06:59

Try this it should work

.container{
  border: 1px black solid;  
  overflow: hidden;  
  vertical-align: top;
  display:flex;
}

.small{
  float: left;
  width: 100px;
  border: 1px black solid;
  background: aliceblue;
  align-self: center;
}

http://jsfiddle.net/8g9cycs8/

score 0 · Answer 3 · edited Sep 06 '17 at 08:04

0

Please use flex box it will solve the problem very easily.

.Container {
    display: flex;
    justify-content: flex-start;
}

edited Sep 06 '17 at 08:04

Serge K.

5,303
1
20
27

answered Sep 06 '17 at 07:20

janaravi

106
1
8

Vertical align is not working

3 Answers3