CSS display inline block How can I prevent rearrangement? - html

Question

I have a small question. Normally I would be ok with the divs rearranging on the screen if the screen is smaller, but for this particular case- I want them to remain the way they are no matter.
I think its the inline-block that may be causing this, but I need all the 4 color rectangles to display the way they display on large screen--throughout (the colorful blocks are 2x2 and the big ones are side by side as well).
When the screen is scaled, it places all on top of one another. I actually do not want this effect--how can this be avoided?
#tools{
background-color: #EEAD0E;
cursor:pointer;
}
#corner{
background-color: #009ACD;
cursor:pointer;
}
#expert{
cursor:pointer;
background-color:#BDD09F;
}
.floating-box {
display: inline-block;
width: 380px;
height: 105px;
margin: 10px;
border: 3px solid #73AD21;
}
#pres{
background-color: #00FF00;
cursor: pointer;
}
#discussions{
background-color: green;
cursor: pointer;
}
.floating-box2 {
display: inline-block;
width: 350px;
height: 305px;
margin: 10px;
border: 3px solid #d3d3d3;
}
<div class="floating-box2"></div>
<div class="floating-box2"></div>
<div id="expert" class="floating-box">
<img src="image.png"/></div>
<div id="tools" class="floating-box"><img src="image2.png"/></div><br>
<div id="discussions" class="floating-box"><img src="image3.png"/></div>
<div id="corner" class="floating-box"><img src="image4.png"/></div>

Answer 1

when you have a fixed with like you have width:380px it's obvious they won't fit together. you need to set a percentage width.
see here jsfiddle
if you add text , add vertical-align:top to the floating boxes. this is because display:inline-block automatically implies vertical-align:baseline
code:
#tools{
background-color: #EEAD0E;
cursor:pointer;
}
#corner{
background-color: #009ACD;
cursor:pointer;
}
#expert{
cursor:pointer;
background-color:#BDD09F;
}
.floating-box {
display:inline-block;
width: 49%;
height: 105px;
box-sizing:border-box;
border: 3px solid #73AD21;
vertical-align:top;
}
#pres{
background-color: #00FF00;
cursor: pointer;
}
#discussions{
background-color: green;
cursor: pointer;
}
.floating-box2 {
display:inline-block;
width: 49%;
height: 305px;
border: 3px solid #d3d3d3;
box-sizing:border-box;
vertical-align:top;
}