CODEWITHSUNDEEP
htmlcss
user1946932
user1946932

Reputation: 600

Div inline-block vertical alignment?

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;
}

Upvotes: 0

Views: 96

Answers (4)

Abhishek Pandey
Abhishek Pandey

Reputation: 13568

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>

Upvotes: 1

Manjuboyz
Manjuboyz

Reputation: 7066

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>

Upvotes: 0

Varsha Rathore
Varsha Rathore

Reputation: 11

.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

Upvotes: 1

Suchit kumar
Suchit kumar

Reputation: 11869

Try this: add 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>

Upvotes: 2

Related Questions