What is the best way to adjust the width of a div based on the remaining space in the viewport?

I've created a Wireframe to showcase the concept I'm aiming for. There are 2 screens included to illustrate how the layout should adapt to different screen sizes.

Check out the Wireframe here

The goal is to have a center-aligned container named "Main-Section" with a maximum width (adjusted based on screen size) and a 12-column grid inside. On either side of the container, there should be two divs called "Left/Right Lane", which will evenly share the remaining space/width on each side.

My main query: How can I configure the left/right lanes to take up the remaining screen width equally?

Your assistance is greatly appreciated!

htmlcsslayoutflexboxresponsive-design

Answer №1

It seems like your question does not contain any code. For those with limited technical skills, I recommend utilizing the Bootstrap Grid System. Check out the Bootstrap Grid System documentation here. If you are new to this, it's beneficial to spend time reading through the documentation and grasping its concepts.

Answer №2

It seems like I've cracked the code on my own. The key piece of information that eluded me was:

flex-grow

.main {
  display: flex;
}


.left-col, .right-col {
  flex-grow: 1;
}

.center-col {
  width: 500px;
}

Check out the solution here.

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

What is the best way to reference a PHP file located outside the same directory as the main PHP file?

My current file structure looks like this: Wamp>www>Newlinks CSS (folder) header.php footer.php Profiles (folder) MainPHPfile.php I'm trying to include the header and footer files into MainPHPfile.php, but it's not working ...

phphtmlcss

Do you believe that using bower to install HTML5Boilerplate is a beneficial decision?

Is it recommended to use HTML5 Boilerplate with Bower for installation? What steps should one take afterwards, considering that it has its own directory structure for CSS and JavaScript, leading everything to be contained under bower_components/html5boil ...

htmlnpmbowerhtml5boilerplate

"Click here to access the downloadable content obtained through web scraping

I am looking to automate a task using Python where I need to get a PDF file from a website with fileid 8426 and date 03312021. Visit this link: Click on the "Download PDF" button Save the downloaded file to a directory After exploring, I came across a P ...

javascriptpythonhtmlpython-requestsweb-crawler

Unexpected results are occurring with the margin merging process

Struggling to create a layout for a website, here is the CSS and HTML I am using. Issue: 1. The header and navigation divs seem to be merging even without using margin 2. The merge is not happening between the navigation and left-nav/content divs Can an ...

htmlcss

What is the best way to stop event bubbling in react-router-dom when using the <Link> component?

Hey there! I have a situation that I need help with. I tried putting the Link around the whole post so that I could prevent bubbling for individual buttons, but for some reason stopPropagation() is not working as intended. Following advice from another s ...

javascripthtmlreactjsjsxreact-router-dom

Avoid flickering of images by properly handling the object URL when setting the image source in an asynchronous pipe

Implementing a JWT authorized endpoint for images has made it impossible to directly link to image urls in HTML. To work around this issue, we have created an async pipe that loads the image with proper authorization (handled by an HTTP interceptor, not s ...

htmlcssangulartypescript

Align the last line of flex cells to the left side

I have created a flex structure that resembles a table and adjusts the number of cells based on the content. However, when the last row is not full, the remaining cells stretch to fill the empty space, which affects the overall appearance of the structure. ...

cssflexbox

Unable to alter the background color of the text box

I am currently struggling with my code where I am trying to overlay a text box on an image. Even after setting the background color to white, it still shows up as transparent. I have successfully done this in the past, but for some reason, it is not work ...

htmlcssbackground-color

Saving HTML elements within an XML file

I am dealing with a String that has an html format containing various html tags. My goal is to enclose this string within xml tags while preserving the html tags, for example: public class XMLfunctions { public final static Document XMLfromString(Str ...

javahtmlxml

Are the Bootstrap columns arranged in a vertical stack instead of side by side?

I currently have two large columns that are stacked vertically on top of one another. I want them to be side by side, like | 1 | 2 |, so that the user can view both columns simultaneously. I am seeking tips or suggestions on how to resolve this issue. Whil ...

javascripthtmlcssbootstrap-4

The image inside an Ionic card's header will automatically adjust its size when text is added

Two cards are currently being displayed on the page: <ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-card class="offersCard"> ...

cssionic-frameworksassionic3

Implement a slideshow feature that automatically changes a CSS attribute when preview images are shown

(Apologies for the perplexing title) My intention was to create a slideshow gallery, and I stumbled upon an example here: https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp In this setup, you'll notice previews of images in a small bar b ...

htmlcss

What order should jquery files be included in?

Today I ran into an issue while trying to add datepicker() to my page. After downloading jqueryui, I added the scripts in the following order: <script type="text/javascript" src="js/jquery.js"></script> <script src="js/superfish.js">< ...

javascriptjqueryhtmlajaxjquery-ui

Pagination of AJAX result on the client side using jQuery

My issue revolves around pagination in AJAX. I want to avoid overwhelming my search result page with a long list of returned HTML, so I need to split it into smaller sections. The Ajax code I am currently using is: $.ajax({ url: "getflightlist.php?pa ...

javascriptphpjqueryhtmlajax

The issue arises when trying to use both CSS Sprite and Background Gradient simultaneously in Chrome/Safari

Lately, I've been having issues with the gradient not displaying correctly in Webkit, although it seems to be working fine in Firefox. Could someone take a look and see if there's an error in how I set it up? Please disregard the images, as it&ap ...

csswebkit

"Is there a way to target an element within another element that has inline styles using

What is the best CSS strategy for targeting elements with inline styles? How can I focus on the first span but exclude the second using only CSS? If that's not achievable, is it possible to accomplish this using jQuery? http://jsfiddle.net/TYCNE/ & ...

htmlcsscss-selectorsinline-styles

Looking to show an image when a checkbox is ticked and hide it when it is unticked in HTML?

How do I make a specific image appear when a user clicks on a checkbox? I'm unsure if I should use jQuery, Ajax, or another method. What is the best approach for this task? Your assistance would be greatly appreciated. I have successfully created the ...

javascriptjqueryajaxhtml

Using a jQuery UI dialog for multiple checkbox selection. The post array cannot be saved for a multi-select until the dialog is opened

CSS <td class="cell"> <a class="opener" id="opener_'.$iterator.'" href="#" rel="#type_dialog_<?= $iterator; ?>">Click here</a> <div id="type_dialog_<?= $iterator; ?>" name="t ...

phpjavascriptjqueryhtmljquery-ui

What are the steps to make a dropdown menu using only HTML and CSS?

Can someone please share the most straightforward method for creating a drop-down list using just HTML and CSS? ...

htmlcss

TabContainer - streamline your selection process with inline tabs

I am currently working on a GUI that includes a TabContainer with two tabs, each containing a different datagrid. I initially created the tabcontainer divs and datagrids declaratively in HTML for simplicity, but I am open to changing this approach if it wo ...

javascripthtmlcssdojo