0

I am creating an html page in which body consists of multiple div boxes. Each box has following style given below, the width is fixed, 400px which is 1/3 of my screen, but height is not fixed. So my screen can accommodate three such boxes horizontally. I have also used float : left so that the boxes always fill space in right if there is some space. But still it does not fulfill what I want.

I am dynamically creating div boxes using php script. When a div box which is rightmost say B has larger height than leftmost div box say A in same row, then the next div say C which is included goes to the bottom of A whose top level goes below bottom level of B, so a huge space is left between A and C. So how to remove that space?

What css should I use so that all div place them accordingly so that no space is left on the page.

.respost {
    margin-left: 10px;;
    width: 400px;
    float: left;
    border-bottom: solid blue;
    border-top: solid blue;
    border-left: solid blue;
    border-right: solid blue;
    margin-top: 30px;
    word-wrap: break-word;
}
Shashwat Kumar
  • 5,159
  • 2
  • 30
  • 66

1 Answers1

0

At the moment, there are a couple of ways to do this. First, you can use separate columns in HTML. This may be awkward, though because you want to just append the divs, like with a for loop.

In the scenario, you would have three columns in html, like so:

<div class="column_wrapper">
  <div class="column column1">
    ...
  </div>
  <div class="column column2">
    ...
  </div>
  <div class="column column3">
    ...
  </div>
</div>

Then the css of column1, 2, and 3, can be:

.column {
    width: 400px;
    float: left;
}

And you can append the reposts to one of the columns, in PHP:

$count = 0;
$columns = array(0=> [], 1=> [], 2=> []);
foreach ($items as $item) {
    $columns[$count++ % 3][] = $item;
}

The better option, if you don't mind adding jQuery to the page, is to use jQuery Masonry.

Jeremy Blalock
  • 2,538
  • 17
  • 23