Perfect Solution from Oriol: Oriol provided a great solution to my issue. Instead of using inline-block on both containers, he suggested floating the first container and leaving the second container with no styling. Additionally, he recommended using overflow:hidden on the main container and the second container to prevent any awkward wrapping outside the box.
The Initial Question
I'm currently designing a profile page with a responsive layout. The profile is enclosed in a fixed DIV at the bottom of the screen.
Check out the demo here: https://jsfiddle.net/ner8j6vz/
The profile comprises two container DIVs nested inside a main container:
- Profile picture and UL with information (fixed width)
- Menu with DIVs (should wrap as the container shrinks or expands)
The containers are displayed as inline-block with white-space:nowrap to prevent wrapping, but this has led to a new problem - the width of the second container doesn't match the main container, causing the menu DIVs not to wrap as desired.
What seemed like a simple task has proven challenging. I've experimented with floating and inline-block variations, and read numerous articles on managing float and inline-block behaviors. I suspect the issue lies in the static width of the first container versus the fluid width of the second container, but I'm unsure.
Here's the code snippet:
<div id="maincontainer">
<div id="subcontainer1">
</div>
<div id="subcontainer2">
<div class="menuelement"></div>
<div class="menuelement"></div>
<div class="menuelement"></div>
<div class="menuelement"></div>
<div class="menuelement"></div>
<div class="menuelement"></div>
</div>
</div>
#maincontainer
{
height:150px;
display:block;
vertical-align:top;
white-space:nowrap;
}
#subcontainer1
{
width:100px;
height:100%;
display:inline-block;
border:2px solid rgb(240,90,40);
}
#subcontainer2
{
height:100%;
display:inline-block;
vertical-align:top;
}
.menuelement
{
display:inline-block;
width:50px;
height:50px;
background-color:rgb(240,90,40);
}