display:inline-block: first div is shorter than second; filling in that space

Question

I have three divs: a, b, and c. They are each 48% wide and displayed as inline blocks. This style will be applied to several pages. Div a will always be shorter than div b. This creates a gap between the bottom of a and the top of c. (Divs a and b will be slightly different heights on each page, but a will always be shorter. Because of the inconsistent heights, I don't feel I can reliably use margin-top:-10px for example.)

How it is:

How I want it:

edit
Mobile:
mobile
/edit

CSS

div {
     width:48%;
     box-sizing:border-box;
     display:inline-block;
     border:1px solid;
     vertical-align:top;
}

@media only screen and (max-width: 600px) {
     div {
          width:100%;
     }
}

HTML

<div style="border-color:red;">a<br>a</div>
<div style="border-color:green;">b<br>b<br>b<br>b<br>b<br>b<br>b<br>b</div>
<div style="border-color:blue;">c<br>c<br>c<br></div>

The media query allows the three divs will be stacked in one column on smaller screen sizes. That's why the divs need to be in this order.

More modern options: [**flexbox**](https://stackoverflow.com/q/34480760/3597276) and [**grid**](https://stackoverflow.com/q/42946454/3597276). — Michael Benjamin, Dec 13 '17 at 20:39

score 1 · Accepted Answer · answered Dec 14 '17 at 13:36

A bit tricky due the dual layout. Keeping the same html layout you have it can be done with a selector for the elements and another for the "b" item (a class, or :nth-child(2) or ...) dealing with float and margin.

(change media with in the code snippet to check the layout change)

div{display:inline-block;width:48%;border:1px solid red;float:left;clear:left}

div.b{clear:none;float:right;margin-right:2%}

@media only screen and (max-width: 200px) {
     div {
          width:100%;float:none;clear:both;
     }
     div.b{margin-right:0;float:none;clear:both;}
}

<div class="a">a<br/>a<br/>a<br/>a</div>
<div class="b">b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/></div>
<div class="c">c<br/>c<br/>c<br/>c</div>

It's funny. I'm quite behind the times with my web design skills. I only just started using display:inline-block instead of float:left. And some folks are pushing flex and other advanced methods (which definitely have their uses.) But good ol' float ftw! — VisHorizons, Dec 14 '17 at 20:36

score 0 · Answer 2 · answered Dec 13 '17 at 21:01

0

set the min-height to them all to be equal in length.

div {
     width:48%;
     min-height:300px;
     box-sizing:border-box;
     display:inline-block;
     border:1px solid;
     vertical-align:top;
}

answered Dec 13 '17 at 21:01

samehanwar

3,280
2
23
26

That certainly takes care of the "white space" between those two divs. But now the void exists inside div a, between the bottom of the content and the bottom of the div. Without the borders, this solution doesn't really alter the appearance. – VisHorizons Dec 13 '17 at 21:12
can you be more specific of what you need to accomplish ? – samehanwar Dec 13 '17 at 21:17
I want to tuck div C up under div A, when the screen is large. But I also need the divs to stack A, B, C when the screen is small. – VisHorizons Dec 13 '17 at 21:24
in this case you need to change your your html layout . – samehanwar Dec 13 '17 at 21:35
for example : divide the page into two halfs and put the desired divs inside each half . – samehanwar Dec 13 '17 at 21:36
If I put div A and div C into a left-column div, and I put div B into a right-column div (or leave it as-is), then when the screen is small (mobile devices), they will not stack properly A on top of B on top of C, as per the media query. I can't group A and C together and also keep the stacking order intact for screen width <600px. – VisHorizons Dec 14 '17 at 14:55

display:inline-block: first div is shorter than second; filling in that space

2 Answers2