Currently, I am facing an issue with the layout of my website. I have two sub-container elements positioned side by side - a left navigation menu and a content display area on the right. These elements are populated in the Document.Ready() function, but this causes the container behind them to not expand properly, resulting in a broken layout.
I've tried adjusting the display properties such as "block" and "inline" to resolve the problem, but haven't had any success so far. If anyone has any insights on what might be causing this issue, please share your thoughts.
I did find a temporary fix by removing the "float:left" property from the pluginBox, but then I lose the ability to create space between these two elements.
https://i.sstatic.net/3jjgK.png
CSS:
.containerBox {
margin: auto;
}
.catBox {
float: left;
height: 750px;
width: 20%;
overflow: auto;
margin: 0;
border: solid black 1px;
}
.pluginBox {
float: left;
margin-left: 25px;
height: 750px;
width: 75%;
overflow: auto;
border: solid black 1px;
}
HTML:
<div id="containerBox" class="containerBox">
<div id="catBox" class="catBox">
<ul id="categories" class="cat_menu"></ul>
</div>
<div id="pluginBox" class="pluginBox">
<table id="pluginTable" class="plugin_table">
</table>
</div>
</div>