Iframe problem

[400138]

I don’t get why a div with an iframe inside mess up all the following div but I don’t get it why.
Can you help me out with this pls?

This html with css works properly

.s-map{
  width:10%;
  height:180px;
  margin-left:100px;
  display:inline-block;
}

.s-red{
   width:10%;
   height:180px;
   background-color: red;
   display:inline-block;
}
 
.s-yellow{
   width:10%;
   height:180px;
   background-color: yellow;
   display:inline-block;
}

.s-green{
   width:10%;
   height:180px;
   background-color: green;
   display:inline-block;
}

.s-black{
   width:10%;
   height:180px;
   background-color: black;
   display:inline-block;
}

div{
  border: 1px solid;
}
<div class="s-map">
  <p>Mappa</p>
</div>
<div class="s-red">
  <p>rosso</p>
</div>
<div class="s-yellow">
  <p>giallo</p>
</div>
<div class="s-green">
  <p>verde</p>
</div>
<div class="s-black">
  <p>nero</p>
</div>

This one mess up once I insert a iframe tag

iframe{
  width:150px;
  border:4px solid green;

}

<div class="s-map">
  <iframe></iframe>
</div>
<div class="s-red">
  <p>rosso</p>
</div>
<div class="s-yellow">
  <p>giallo</p>
</div>
<div class="s-green">
  <p>verde</p>
</div>
<div class="s-black">
  <p>nero</p>
</div>

[SamA74]

It would help to know your expected result, but I’m assuming that you want the divs all in line.
There are two problems that I see.
First, your iframe has a fixed width of 150px, but its container has a variable % based width, meaning that the iframe will not always fit its container.
The other problem is that because the other divs have text content, they are affected by vertical alignment, which is why the boxes don’t line up in a row as you would expect.
That could be fixed by setting the vertical alignment for the boxes.

div{
  border: 1px solid;
  vertical-align: top; /* add alignment*/
}

OT. you could save a few lines by putting common css rules into a single class for all boxes.

.box {
   width:10%;
   height:180px;
   display:inline-block;
   border: 1px solid;
   vertical-align: top;
}

<div class="s-map box">

[400138]

Hi SamA74, you’re definitely got the point! And you definitely solved with vertical-align: top. The width didn’t affect it I tried different solution, with % or fixed value the result was always the same, they were not align, but now they are.

Appreciate a lot your prompt reply.
Thank you