7

I really hope I'm not repeating some well known problem, but i tried to search for it and didn't find anything quite like this. Closest was the masonry layout with jQuery, but that does not meet the criteria i need. Sorry if anything is unclear, i'm not native English speaker.

I need to create a view in which a number of boxes (divs) are placed in the same parent div. Each of those tiles has same width but different height. Each of the tiles needs to be placed at per-box specified vertical distance from parent top edge and as close to left edge of the parent as possible to prevent overlapping between tiles.

What I'm trying to get is this:

enter image description here

I tried two solutions:

1) giving them float: left; with margin-top: XYZpx;, but that unfortunately does not work when one of the tiles has margin-top large enough to be below all other boxes. I would like it to float to the left edge of the parent, but the margin "collides" with other tiles and gets placed to the right of all previous tiles (tile 5):

JSFiddle (you may need to expand result window to see actual result - everything in one row)

2) giving the tiles position: absolute; and top: XYZpx; but that leaves me with them overlapping in one column, with no apparent way to prevent it:

JSFiddle

Is there a way to either make floated tiles "collapse" to the left, or for absolute positioned divs to not overlap? (aside from analyzing the tiles and computing the correct left: value, which i don't have a clue how to do. Result is what i need, but i don't know how to properly determine left values when generating the page: JSFiddle)

Edit: To clarify, those tiles are generated from php, there is unknown number of them, with unknown heights. The PHP code inserts top and height values as inline style, values calculated from database data. I'm looking for a way to style those tiles to go as far left as possible without overlapping with any of the tiles "above" them (in code, they are sorted by start height - from top: 0px; to top: MAXpx;). Also, there are no rows - tiles may have any value for their distance from the top of the parent. Think of this as a sort of timetable where many entries can be happening at the same time.

Edit2: As requested, html, css provided.

Edit3: In an ideal world, this is what i would like to happen (note the tile 4 "realizing" it will fit under 2. JSFiddle)

4
  • Oh, absolute won't work at all :P The only thing you need to know is this: floats won't align vertically if all of the element's vertical heights are not the same. inline-blocks will. If you're ever looking for alignment which needs row-wise separation, go for inline-blocks, or better, flexbox, which I must say, are AWESOME!
    – kumarharsh
    May 9, 2015 at 8:05
  • Please can you include some code (HTML and CSS) of what you have tried so far? This will give anyone answering a good starting point and ensure their answer is relevant to your particular case. May 9, 2015 at 12:51
  • Flexbox? I'm still not grasping the requirement but can you take a look at flexbox layout for css. That might help. May 9, 2015 at 14:03
  • Looked at flex as well, it works in rows, i don't have rows. Can you specify which part of the requirement is unclear, i'll try to rewrite it.
    – gloowa
    May 9, 2015 at 14:17

2 Answers 2

4

You have to use clear:both at the end of 4th box in your first solution

HTML

<div class="1">1</div>
<div class="2">2</div>
<div class="3">3</div>
<div class="4">4</div>
<div class="clear"></div>
<div class="5">5</div>
<div class="6">6</div>

CSS

.clear{clear:both; width:0; height:0; display:inline-block;}
1
  • 1
    That's correct, but those divs are generated by php. There is unknown number of them, and they have unknown height. I need something that would work aoutomagically :)
    – gloowa
    May 9, 2015 at 10:14
2

Have you looked at using Bootstrap to help with this. May be a little "Push or Pull". Take a look at this Fiddle to see if it helps you.

<div class="container col-xs-12 block">
    <div class="col-xs-1 bg-success Block1">1</div>
    <div class="col-xs-1 col-xs-offset-1 bg-primary Block2">2</div>
    <div class="col-xs-1 bg-success Block3">3</div>
    <div class="col-xs-1 col-xs-pull-4 bg-primary Block4">4</div>
    <div class="col-xs-1 col-xs-pull-4 bg-success Block5">5</div>
    <div class="col-xs-1 col-xs-pull-4 bg-primary Block6">6</div>
</div>
2
  • hmm, looks promising, but would like to avoid js if possible... will do some research on this.
    – gloowa
    May 9, 2015 at 13:48
  • Correct. Hmmm. That could work, except i would still need to compute (somehow) the pull-* values for appropriate tiles - the number size and position of the tiles will vary.
    – gloowa
    May 9, 2015 at 14:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.