Within my website lies a div container housing smaller divs that are arranged horizontally for horizontal scrolling. My intention is to have them appear as follows:
+-Container------------------+
| +-a-+ +-b-+ +-c-+ +-d-+ |
| | | | | | | | | |
| +---+ +---+ +---+ +---+ |
+----------------------------+
However, the actual layout currently looks like this:
+-Container------------------+
| +-a-+ +-c-+ |
| | | +-b-+ | | |
| +---+ | | +---+ +-d-+ |
+----------------------------+
Upon reviewing the CSS code provided below:
#a,#b,#c,#d{
display: inline-block;
margin-left: 2.5%;
height: 450px;
white-space: normal;
}
#container{
display: block;
margin: auto;
overflow-x: auto;
white-space: nowrap;
height: 450px;
}
It appears that the top space within each box is influenced by its content (based on experimentation). Is there a method to ensure the boxes remain anchored to the top of the container during horizontal scrolling? Should this behavior be occurring in the first place?