In my website, I have a container div with two columns inside, both set as inline-block elements. The left column is where users make selections from a shopping catalogue, while the right column displays the output of those selections.
The problem arises when setting widths for each column based on percentages relative to the parent width. The left column has a fixed minimum width of 155px and takes up 20% of the parent width, while the right column occupies 79% of the width (with some room for variability).
However, when resizing the browser window, issues occur if the left column's width doesn't meet the required 79% of the screen size. As a result, the right column drops below the content of the left column.
For example:
HTML:
<div id="container">
<div class="leftsideMenu">Menu column.</div>
<div class="rightsideShop">Shop Contents</div>
</div>
CSS:
#container{
width:80%;
min-width:555px; /* ensure 400px for shop contents */
}
.leftsideMenu {
display:inline-block;
width:20%;
min-width:155px;
vertical-align:top;
}
.rightsideShop{
display:inline-block;
width:79%;
max-width:calc(100% - 156px) !important; /* attempt at fixing issue */
vertical-align:top;
}
I've tried several solutions like using 'calc' function or floats and margins, but they haven't worked as expected. Flexbox might be the best solution, but it would require significant CSS changes that I was hoping to avoid.
After struggling with this issue and writing this out, I finally found a solution so sharing it here!