user2557504 user2557504 - 5 months ago 17
HTML Question

CSS display inline block How can I prevent rearrangement?

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

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

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