Using nth-child to display divs side by side-one larger div on the left two smaller on the right-but the second smaller div keeps getting pushed down

Question

I'm playing around with nth-child and trying to create a layout that looks like this

but for some reason the larger divs will only allow one smaller div to display to its side, it pushes the second smaller div down like this:

even though according to the dimensions they should fit. What am I missing or not understanding here? I've included my HTML and CSS below:

#main {
  text-align: center;
}
.boxes {
  font-size: 30px;
  height: 200px;
  width: 45%;
  background-color: grey;
  margin: 10px;
  display: inline-block;
}
.boxes:nth-child(6n-2) {
  font-size: 30px;
  height: 420px;
  margin: 10px;
}
.boxes:nth-child(6n-5) {
  font-size: 30px;
  height: 420px;
  margin: 10px;
}

<div id="main">
  <div class="boxes">box1</div>
  <div class="boxes">box2</div>
  <div class="boxes">box3</div>
  <div class="boxes">box4</div>
  <div class="boxes">box5</div>
  <div class="boxes">box6</div>
</div>

What you are trying to achieve is called a **Masonry** layout. Sure you can try floating different children or wrap each group in a container but this requires a lot of maintenance and is not flexible. — Aziz, May 11 '16 at 20:54
Related: http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css — Aziz, May 11 '16 at 21:24

score 0 · Answer 1 · answered May 11 '16 at 20:37

0

you need to assign float-parameters to these boxes: float:left to box 1,2,3 , float:right to box 4,5,6

Here's a codepen: http://codepen.io/anon/pen/mPojBJ

(widths / margins still need to be tweaked)

answered May 11 '16 at 20:37

Johannes

64,305
18
73
130

Adam Buchanan Smith · Answer 2 · 2016-05-11T20:52:30.683

0

I think this will work for you, see fiddle https://jsfiddle.net/c259LrpL/44/

change .boxes{display: inline-block} to .boxes{float: left}

.boxes {
  font-size: 30px;
  height: 200px;
  width: 45%;
  background-color: grey;
  margin: 10px;
  float: left;
}

Then float the other big box right

.boxes:nth-child(4) {
    float: right;
    margin-right: calc(100% - (90% + 30px)) !important;
}

edited May 11 '16 at 20:52

answered May 11 '16 at 20:41

Adam Buchanan Smith

9,422
5
19
39

Thanks, this works well. Although I'd still be interested in knowing why my original solution doesn't work if you have any ideas, as it seems like it should. – nick stobie May 11 '16 at 21:07
@nickstobie Its because you were using `inline-block` incorrectly, see here for a good explanation http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block – Adam Buchanan Smith May 11 '16 at 21:14

score 0 · Answer 3 · answered May 12 '16 at 04:02

<style type="text/css">
.main{
    height:500px;
    width:400px;
}
div.subDiv{
    height:50%;
    margin:5px;
}
div.subDiv>div{
    width:47%;
    height:100%;
    display:inline-block;
}
div.subDiv>div>div{
    height: 122.5px;
    background-color:gray;
}
div.subDiv>div>div+div{
    margin-top:5px
}
.gray{
    background-color:gray;
}
</style>

<div class="main">
    <div class="subDiv">
        <div class="gray"></div>
        <div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="subDiv">
        <div>
            <div></div>
            <div></div>
        </div>
        <div class="gray"></div>
    </div>
</div>

Hi. It will be more easy if you will do the above implementations. As you can see, I didn't use float:left because it is more efficient to use display:inline-block;

Using nth-child to display divs side by side-one larger div on the left two smaller on the right-but the second smaller div keeps getting pushed down

3 Answers3