-1

One container with four or more divs inside that line up like a perfect puzzle and the last div fills out the remaining height..

the image illustrates how it should look like

enter image description here

where I am at: http://jsfiddle.net/meb9h3vx/

.wrap {
  float: left;
  background: #fff;
  width: 100%;
}

.get2 {
  float: left;
  height: auto;
  width: 50%;
}
<div class="wrap">
  <div class="get2">
    <h1>1</h1>
    abc
  </div>
  <div class="get2">
    <h1>2</h1> 
  </div>
  <div class="get2">
    <h1>3</h1>
    d
    <br>e
  </div>
  <div class="get2">
    <h1>4</h1> 
  </div>
</div>
Pete
  • 57,112
  • 28
  • 117
  • 166
user3603497
  • 39
  • 5

4 Answers4

1

Try using this -

  1. remove float from both .wrap and .get2
    1. remove text-align: center; from body css
    2. add following css to .get2 - text-align: center; display: inline-block; vertical-align: top;
    3. add margin-left: -4px; css to .get2:nth-child(2) { }
    4. and add margin-left: -4px; margin-top: -17px; css to .get2:nth-child(4)
Ravi Khandelwal
  • 718
  • 1
  • 5
  • 15
1

Flexbox to the rescue with no dirty hacks:

body {
    background:#000;
    color:#ccc;
    text-align:center;
    margin:10px;
}
.wrap {
    background:#fff;
    width:100%;
    display:flex;
    flex-wrap: wrap;
    height:auto;
}
.get2 {
    height:auto;
    width:50%;
}
.get2:nth-child(1) {
    background:red;
}
.get2:nth-child(2) {
    background:green;
}
.get2:nth-child(3) {
    background:yellow;
}
.get2:nth-child(4) {
    background:blue;
}
<div class="wrap">
  <div class="get2">
    <h1>1</h1>
    abc
  </div>
  <div class="get2">
    <h1>2</h1>

  </div>
  <div class="get2">
    <h1>3</h1>
    d
    <br>e</div>
  <div class="get2">
    <h1>4</h1>

  </div>
</div>
Pete
  • 57,112
  • 28
  • 117
  • 166
0

Hey you can try by giving min-height as i am giving below

    .get2{
    float:left;
    height:auto;
    width:50%;
    min-height:120px
}
jayant rawat
  • 305
  • 4
  • 19
0

Fixed it! So I inline-block the div and nth-child(2n) margin-left:-4px to get rid of the white-space and vertical-align:top and then the last part I added: padding-bottom: 99999px; margin-bottom: -99999px; http://jsfiddle.net/p428b71y/1/

.wrap{
float:left;
background:#fff;
width:100%;
 overflow:hidden;
}
.get2:nth-child(2n){
margin-left:-4px;
}
.get2{
  vertical-align:top;
    display:inline-block;
    height:auto;
    width:50%;
    padding-bottom: 99999px;
    margin-bottom: -99999px;
}
user3603497
  • 39
  • 5
  • Rather than the `margin-left: -4` which is messy try removing the spaces/returns between your `get2` DIVs... sounds messy right? The trick I use to clean up `inline-block` elements is to use comments (``) to remove the unwanted spaces/returns. [jsfiddle](http://jsfiddle.net/jrulle/p428b71y/2/) – JRulle Aug 21 '15 at 11:31
  • You may want to read this as to why using 9999px (or in your case 99999px) is a bad thing: http://stackoverflow.com/questions/8971152/is-text-indent-9999px-a-bad-technique-for-replacing-text-with-images-and-what – Pete Aug 21 '15 at 12:05