An Overview of My Current Project
My ongoing project involves a webpage layout consisting of three columns arranged from left to right as follows:
- Project List
- Code Details
- Code Window
The Project List and Code Details columns are set with a max-width of 600px, but should expand to 100% on mobile devices, where the order of appearance will be Code Details -> Project List -> Code Window. All three columns should fit within the page width when viewed on desktop. While this setup has been challenging, I feel like I'm close to solving it, just missing one key element.
It's important to note that I am using Bootstrap 4 in this project, although its impact on the solution isn't clear yet (but mentioning it for reference).
The Challenge at Hand
I am looking to have the Project List and Code Details collapsed by default, while the Code Window should expand to full width when both are collapsed. When either the Project List or the Code Details is displayed, the Code Window should adjust to fill the remaining space on the right. This behavior mirrors how Google managed their maps interface previously.
Various attempts have been made, and the closest result was achieved by placing the left two columns inside a single container, setting them as float: left, and giving the Code Window a width of 100%.
html, body {
height: 100%;
overflow: hidden;
}
.main-content {
display: flex;
width: 100%;
}
.left-content {
float: left;
}
.right-content {
width: 100%;
background-color: #5c7;
}
.project-list {
max-width: 200px;
float: left;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: #f33;
}
.code-details {
max-width: 200px;
float: left;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: #37f;
}<div class="main-content">
<div class="left-content">
<div class="project-list">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
</div>
<div class="code-details">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
</div>
</div>
<div class="right-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu. Amet commodo nulla facilisi nullam vehicula. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Quis commodo odio aenean sed adipiscing diam. Diam maecenas sed enim ut sem viverra. Lacus vestibulum sed arcu non odio euismod. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Dapibus ultrices in iaculis nunc. Felis donec et odio pellentesque. Diam sollicitudin tempor id eu nisl. Duis at consectetur lorem donec massa. Duis ultricies lacus sed turpis tincidunt id. Sagittis purus sit amet volutpat consequat mauris nunc. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet.</p>
</div>
</div>In my current setup, the left columns stack on top of each other instead of aligning side by side on desktop view. The desired effect is for them to overlap only on mobile screens, not on desktop. As seen in the example above, the stacking issue is evident.
The Query at Hand
How can I achieve the functionality of filling remaining width and prevent overlapping while arranging the stacked div elements from left on desktop view? Mobile optimization can be addressed later, but for now, I seem to be stuck in a loop trying to figure out this layout challenge.