-1

I'm trying to get my head around a floating problem.

I get pairs of elements with 50% with, one of them is always higher than the other. With every new pair of elements the higher element changes sides (e.g first pair high element on the left, second pair high element on the right).

I need to get them in a pattern that looks like this (link):

img_structure

Here is what I got:

.main {
  width: 500px;
}
.container {
  width: 100%;
}
.box50 {
  width: 50%;
  border: 1px solid black;
  float: left;
  box-sizing: border-box;
}
.high {
  height: 120px;
}
.low {
  height: 50px;
}
<div class="main">
  <div class="container">
    <div class="box50 left high">
      <p>1</p>
    </div>
    <div class="box50 right low">
      <p>2</p>
    </div>
  </div>
  <div class="container">
    <div class="box50 left low">
      <p>3</p>
    </div>
    <div class="box50 right high">
      <p>4</p>
    </div>
  </div>
</div>

By clearing the second row i get the div to be in the correct order but i cant get the higher element to reach in the empty space above.

Is there a css solution for this?

Matthias A. Eckhart
  • 5,136
  • 4
  • 27
  • 34
smoe
  • 1
  • 2
  • No, there isn't. You can use a Javascript library like Masonry. http://masonry.desandro.com/ Apart from that, your only option is to use CSS 3 columns, but that requires reordering your elements since they will be aligned column-wise, not row-wise. – connexo Sep 11 '15 at 07:43
  • since reordering the elements is no option ill took a look at masonry. works like charm. thanks for your help, didnt know the "masonry-grid" term! – smoe Sep 11 '15 at 08:47

3 Answers3

1

I made an example for you. http://jsfiddle.net/zweapes6/1/

Notice the way i used

rows > column > content

It's best practice to first make two column of 50% and put them next to each other and put the other divs inside.

Other thing to keep in mind, it's not a good idea to use fixed heights (like 120px) when building something responsive.

Or just use masonry like Maheswaran suggested.

Kristijan Iliev
  • 4,901
  • 10
  • 28
  • 47
Steyn
  • 1,311
  • 8
  • 15
  • This is what I suggested in my comment 10 minutes before your answer. A CSS only solution (as the one in your fiddle) requires re-ordering the elements, which is probably not acceptable. – connexo Sep 11 '15 at 07:59
  • thanks for your help, sadly i cant change the order of the elements so ill have to stick with masonry. Brilliant tool ive never heard of :) – smoe Sep 11 '15 at 08:49
0

HTML

<div class="container">
    <div class="main">
        <div class="left right">
            <div class="box50  high">
                <p>1</p>
            </div>
            <div class="box50  low">
               <p>3</p>
            </div>
         </div>
           <div class="left right">
               <div class="box50  low">
                    <p>2</p>
               </div>
                <div class="box50 high">
                    <p>4</p>
                </div>
           </div>
        </div>
</div>

CSS

.container {
    width: 50%;
}
.main:after{
    clear:both;
    display:table;
    content:'';
}
.box50 {
    border: 1px solid black;
    box-sizing: border-box;

}
.high {
    height: 120px;
}
.low {
    height:50px;
}
 .left{
    float : left;
    display : block;
}
    .right{
    width : 50%;
}
* {margin:0; padding:0;}
-1

You try the url http://masonry.desandro.com/ it will give the solution for you

Maheswaran S
  • 525
  • 3
  • 12