A layout featuring three columns with two collapsible navigation menus on the left side

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.

Answer №1

To make this work, simply add flex-grow: 1 to the code-window element. When either the project-list, code-details, or both are collapsed, the code-window will automatically expand to fill the remaining space.

For mobile devices, you can use media queries to remove the display: flex and max-width: 200px properties, allowing them to take up the full width of the screen.

.main-content {
    display: flex;
}

.project-list {
    background-color: #FF3333;
    max-width: 200px;
}

.code-details {
    background-color: #3377FF;
    max-width: 200px;
}

.code-window {
    background-color: #55CC77;
    flex-grow: 1;
}
<div class="main-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...
     </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...</p>
    </div>
    
    <div class="code-window">
        <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 e...
    </div>
</div>

Answer №2

.main-content {
    display: grid;
    grid-template-columns: 1fr 1fr 3fr;
}

.main-content>div{
    padding: 12px;
}

.project-list {
    background-color: #F33;
}

.code-details {
    background-color: #37F;
}

.code-window {
    background-color: #5C7;
}
<div class="main-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 class="code-window">
        <p>Unique text replaces existing Lorem Ipsum content to ensure originality of the code snippet displayed on the webpage. This customization enhances user experience and engagement with the website by offering fresh and relevant information related to the featured project details.</p>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing Body Color in CKEditor for Dynamic Designs

I am facing an issue with CKEditor that I am hoping to find a solution for. My scenario involves using a jQuery color picker to set the background color of a DIV element, which is then edited by the user in CKEditor. However, I have observed that it is not ...

Decreasing the gap between two <tr> elements

Looking to showcase a company logo alongside the company name without using flexbox for compatibility with older browsers? Take a look at this simple HTML and CSS code snippet: <table style="background-color: cadetblue;width:100%;padding:10px"> ...

Saving downloaded web pages as an HTML document

I'm looking to extract the HTML content of a webpage. Within this HTML, there are two specific elements with XPaths that I need to retrieve. Unfortunately, my knowledge on this subject is quite limited. While searching for solutions, most examples in ...

Tips on making a fresh form appear during the registration process

After clicking on a submit button labeled as "continue" within a form, a new form will appear for you to complete in order to continue the registration process. ...

ngx-datatable - Customizing Bootstrap themes for column headers

I'm currently working on integrating ngx-datatable with Bootstrap theming. To achieve this, I have included the necessary Bootstrap CSS files from both Bootstrap 4 and ngx-datatable in the styles section of my app: "styles": [ "node_modules ...

Growing the <p> sections

I'm struggling to find a suitable title for this issue. Currently, I am dealing with dynamically generated content that consists of <p> elements representing bookmark tags created by users. As the number of elements increases, I want the conten ...

Firefox is a great web browser for handling CSS Flex Box layouts with varying

html, body { padding: 0; margin: 0; height: 100%; min-height: 100%; } body { display: flex; flex-direction: column; } header { flex: 1; height: 60px; background: lightblue; padding: 0; margin: 0; } header p { text-align: cente ...

Embedding a styled list item within a list

How can I customize the style of list items within a list? HTML code <span class=bbb> <ul> <li>Preparing archive inquiries about study periods or work experience at LLU: <ul> <li>Within seven days - 5 ...

Steps to modify the background-color of an iFrame using CSS

I am attempting to extract HTML code from an iframe and apply a background-color to the class: class="body" The structure of my HTML source is as follows: <iframe id="sc_ext_XT29EK" class="sc_ext" width="100%" height="1300px" frameborder="0" src="some ...

Troubleshooting Border Width Problem in Safari Version 9.1.3

It seems like there is an issue in Safari 9.1.3 where the border width on elements with a specific combination of styles is causing unexpected outcomes. Essentially, I am using a transform on an absolutely positioned element to achieve horizontal centering ...

Problem arising from implementing background and relative positioning in html and css

Encountering an issue with html and css. Today, attempted to create a page with a large background image for the first time. Utilizing the foundation framework, but facing a challenge. Foundation is an adaptive framework, and when resizing the browser, a ...

Style the CSS elements for a specific item

I have a situation where I need to change the background image of a specific element within a CSS class without affecting others. For example, I have a class "a" with a background image that is used for multiple elements, but I only want to change the back ...

It is more beneficial to utilize jQuery instead of directly accessing form element values using document.formname

Just a quick question. Currently, I am working on some JavaScript for pre or frontend validation. I have a question about which line of code is more effective. I usually use this method: document.formname.forminput.value Instead of: $(& ...

Is there a way to reduce the excessive bottom margin on Twitter embeds?

Is there a way to adjust the Twitter embed code for tweets so they don't have a large margin at the bottom? Here is an example of the standard Twitter embed code: <blockquote class="twitter-tweet"><p>@<a href="https://twitter.com/gami ...

The Javafx WebEngine's executescript() function is unable to send a multiline string

Issue: I'm struggling to make the JavaFX WebEngine trigger a JavaScript function when using a Java String object with multiple lines. If I input the following example in HTML: "asd" ENTER "qwe" into the textArea, and then click the send button, the f ...

Operate a seamless resizing of container divs within the Bootstrap carousel to avoid any sudden "jump" in size adjustments

In my current project, I am faced with the challenge of smoothly resizing container divs as users switch between image or video assets of varying sizes/heights within a Bootstrap carousel. Currently, the resizing process appears to be abrupt and not visua ...

JavaScript Datepicker Formatting

I need to modify the date format of a datepicker. Currently, it displays dates in MM/DD/YYYY format but I want them to be in DD-MM-YYYY format. <input id="single-date-picker" type="text" class="form-control"> Here's the JavaScript code: $("# ...

Is it possible to retrieve or modify the dimensions and position of an element set in a static position using only JavaScript?

Is it possible to access or modify the coordinates, width, and height of an element that is statically positioned using only JavaScript? If so, how can this be done in both pure JavaScript and jQuery? ...

Positioning a BootStrap well in the center

I'm attempting to center a Bootstrap Well labeled "Resource Booker" within a div to align properly with the two boxes below it. I've experimented with adding padding, but it ends up adding padding within the well itself. Below is a picture of the ...

SOLVED: How to utilize CSS to confine scrollbars within nested div elements

As a novice in web programming, I am currently working on a userscript to add hotkeys to a website. I am using Firefox on Linux for this project, focusing solely on desktop functionality. Right now, my main focus is on enhancing the pop-up help view, which ...