I encountered an issue while trying to position the divs titled "menu" and "content" side by side. Initially, they were placed correctly until I decided to set their width using % instead of px. After making this adjustment, the 'float: left;' property no longer had any effect. Despite attempting to rearrange the parameters in the CSS file, the desired layout was not achieved. My goal is to maintain a 20/80 ratio between these two divs while keeping them adjacent to each other. Is it possible to accomplish this using the current method, or am I overlooking some crucial information suggesting that these properties cannot be applied to the same div?
#menu {
background-color: lightgray;
width: 20%;
min-height: 600px;
padding: 10px;
text-align: center;
float: left;
}
#content {
background-color: gray;
width: 80%;
min-height: 600px;
padding: 10px;
float: left;
}<div id="menu">
menu
</div>
<div id="content">
content
</div>