Div inline-block vertical alignment?

Question

When running https://jsfiddle.net/8vy5aefr/2/ at a width of around 220px, is there a way for the blue square to sit right underneath the red square (aside from margin-top:-100px;)?

Note the single column "mobile" mode at around 100px is displaying as desired: red, green, blue.)

.d1 {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: red;
    vertical-align: top;
}

Answer 1

Try this: add clear:both; float:left; clear:both; float:left; in .d3 and float:left; in .d1 .

 .d1 { width:100px; height:100px; display: inline-block; background-color:red; vertical-align:top; float:left; } .d2 { width:100px; height:200px; display: inline-block; background-color:green; vertical-align:top; } .d3 { width:100px; height:100px; display: inline-block; background-color:blue; vertical-align:top; clear:both; float:left; } 

 <div class='d1'></div> <div class='d2'></div> <div class='d3'></div> 

Answer 2

.d3{
    Width: 100px;
    Height: 100px;
    Display: inline-block;
    Background-color: blue;
    float: left;
    position: initial;
    clear: both;
}
.d2 {
    Width: 100px;
    Height: 200px;
    Display: inline-block;
    Background-color: green;

}

.d1 {
    Width: 100px;
    Height: 100px;
    Display: inline-block;
    Background-color: red;
    Vertical-align: top;
    float: left;
}

This will help you

Answer 3

Try this,

Wrapped all divs in One parent div and gave float:right to .d2

 .wrapper { width:100%; max-width: 200px; } .d1 { width: 100px; height: 100px; display: inline-block; background-color: red; vertical-align: top; float: left; } .d2 { width: 100px; height: 200px; display: inline-block; background-color: green; vertical-align: top; float: right; } .d3 { width: 100px; height: 100px; display: inline-block; background-color: blue; vertical-align: top; clear: left; float: left; } @media screen and (max-width:201px){ .d1,.d2,.d3{ float:none; } } 

 <div class="wrapper"> <div class='d1'></div> <div class='d2'></div> <div class='d3'></div> </div> 

Answer 4

If you are fine using table instead DIV then here is the simple code.

 .d1 { Width: 100px; Height: 100px; Background-color: red; } .d2 { Width: 100px; Height: 200px; Background-color: green; } .d3 { Width: 100px; Height: 100px; Background-color: blue; } 

 <table> <tr> <td class="d1">Red</td> <td class="d2" rowspan="2">Green</td> </tr> <tr> <td class="d3">Blue</td> </tr> </table>