What is the best way to ensure that the content container's max-width for a split tier is the same as the width of a full-width tier?

My goal is to create a split tier on a webpage with a 60/40 layout. The size of this tier should be calculated based on the maximum width of the container above it. Using JavaScript and jQuery, I managed to derive the max-width value of the full-width-tier container class and manipulate it to calculate separate values for the left and right sides of the split tier. The left side takes up 60% of the max-width while the right side takes up 40%.

Below is the code I used:

HTML/JS/jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="tier-one" class="full-width-tier">
   <div class="main-text container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
   </div>
</div>

<div id="tier-two" class="flex-tier">
    <div class="flex-col-1">
    <div class="main-text container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...<p>
    </div>  
  </div>

<!-- Left tier container max-width calculator  -->
<script>
// Calculation code for left side
</script>

<script>
// Apply calculated max-width to left side
</script>
<!-- End calculator -->

  <div class="flex-col-2">
    <div class="main-text container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
  </div>

<!-- Right container max-width calculator  -->
<script>
// Calculation code for right side
</script>

<script>
// Apply calculated max-width to right side
</script>
<!-- End calculator -->

</div>

CSS

// CSS styling code goes here...

I've encountered an issue where, despite correctly calculating the values, the containers of the two tiers do not align at larger screen sizes. This problem persists even after adjusting proportions or manually setting widths. The solution needs to work regardless of varying max-width values set for the container class.

For a clearer understanding of my conundrum, you can view a screenshot here.

If you'd like to delve deeper into the code setup, feel free to check out the provided jsfiddle link. Any assistance in resolving this alignment issue would be greatly appreciated. Thank you!

javascriptjqueryhtmlcss

Answer №1

Apologies for the lengthy question, but if you're trying to create two columns with specific size ratios using CSS grid, here's a solution for you:

.container {
display: grid;
grid-template-columns: 40% 60%; /*another option is 40% auto */
grid-template-rows: 100%;
}

.smallColumn {
grid-column: 1 / 2;
}

.largeColumn {
grid-column: 2 / 3;
}

If you're not familiar with CSS grid, it's worth learning as it can be very helpful. Check out this resource for more information.

Feel free to ask for clarification or assistance on other issues. Best of luck!

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

Guide on effectively sending a secondary parameter in an ajax request

Struggling to implement a year/make/model multi-select feature, I have managed to get the scripts working. However, what appears to be missing is the ability to pass both a year and make variable together in order to fetch the final model results. Below a ...

javascriptphpjqueryajax

Transform C# ASPX to handlebars format

Initially, my task was to choose and relocate a single li from many options into a different div. But now, I am required to achieve the same result using a JS template which utilizes handlebars. The C# section is as follows: <li class="l-row__item pr ...

c#javascriptjqueryhandlebars.js

Altering the color of numerous labels using ajax jQuery and .NET Core MVC

I have developed a feature that allows users to choose answers using radio buttons. Once the user has selected all answers and clicked Submit, the answer labels will be displayed in the following three scenarios: If the user selects the correct answer lab ...

c#jqueryajaxasp.net-core-mvc

Is there a way to display the overall count of items in ReCharts?

I'm curious about how to access the additional data items within the 'payload' field of recharts when using material-ui. Despite my efforts to find relevant sources, I have not come across any references pertaining to accessing other group n ...

javascriptreactjsreduxmaterial-ui

The Django ajax request returned an unexpected error when parsing the JSON response

I am attempting to implement a Django AJAX HttpResponse JSON functionality using medium-editor. view.py def test(request, union_id): if request.is_ajax(): t = Union.objects.get(id=union_id) message = json.loads(request.body) t.description = m ...

jquerypythonajaxdjangojson

How can I display table rows along with their child table rows in Angular?

Is there a way to display API data in a table using Angular? The table should have collapsible rows with nested child rows. This is the JSON file structure: { "collapse1": [ { "name": "Soil", "budget": 12345, "child": [ { ...

javascripthtmlangulartypescript

"Bootstrap-Wizard: How to troubleshoot the onPrevious function not working when used with an

I have been incorporating a bootstrap wizard into one of my applications, and I have encountered an issue. When attempting to utilize the index position of the tabs to achieve a specific goal, I found that it only works with the next button and not with th ...

javascriptjquerytwitter-bootstrapweb-deploymenttwitter-bootstrap-wizard

In the realm of Typescript Angular, transferring the value of an object's property to another property within the

I'm working with a large TypeScript object and I am hoping to automate certain parts of it to streamline my workflow. myObject = [ { id: 0, price: 100, isBought: false, click: () => this.buyItem(100, 0) } buyItem (it ...

javascriptangulartypescriptobjectautomation

Encountering a Laravel Nova issue where attempting to override a Vue component leads to a Vue warning: Error

Recently, I decided to incorporate a user guide into my nova using the following Vue Shepherd library. To make this work, I made some adjustments in the files within the nova directory. One of these changes involved renaming the file "webpack.mix.js.dist" ...

javascriptlaravelvue.jsvue-componentlaravel-nova

Dropzone is encountering an issue with uploading photos: The upload path seems to be invalid

Despite thoroughly checking the path settings in my code, the error message persists when I attempt to upload photos using Dropzone. It seems to be indicating a problem with the upload path. What could be causing this issue? I am currently in the process ...

javascriptphpdropzone

Executing a click on a checkbox element in Python with Selenium

Background: Currently, I am in the process of developing a Python script that will automatically download listings from a specific website. I have successfully programmed the script to navigate the webpage, search for keywords, click on the search button, ...

javascriptpythonhtmlseleniumweb-scraping

Identifying a specific item within an array

Can someone guide me on how to manipulate a specific object within an array of objects? For example: var myArray = [ {id: 1}, {id: 2}, {id: 3}, {id: 4} ] // Initial state with the 'number' set as an array state = { number: [] } // A functio ...

javascriptreactjs

Creating an automated HTML tag for a form input

https://i.sstatic.net/ZBDk2.png Is there a plugin to create form inputs like the one shown above? How can I add this feature to my own website? I would like for every user input to automatically add the < br > tag. ...

phphtmlforms

I'm keen on creating a marquee animation using Tailwind and Next.js

I'm working on creating a marquee animation using Tailwind CSS and Next.js, and I've made some progress. However, the issue I'm facing is that the items are not displaying one after the other smoothly; there seems to be a delay when the seco ...

cssnext.jstailwind-css

TypeError: The function cannot be performed on the value of 0 in the Array.from

I encountered a peculiar error while attempting to utilize Array.from with Array.prototype.map. let fn = Array.from.bind(Array); // [Function: bound from] fn('test') // [ 't', 'e', 's', 't' ] ['test ...

javascriptarrays

Utilizing AngularJS with Restheart API to streamline MongoDB integration and efficiently parse JSON data outputs

Utilizing RestHeart to expose CRUD functionality from MongoBD. Attempting to call the Rest API from AngularJS and retrieve the JSON output like the one displayed below. My focus is specifically on extracting the name, age, & city fields that are stored in ...

javascriptangularjsmongodbrest

Manipulating events through adjusting values of a JQuery-UI range-slider

My range-slider's values are being set with the code: $('...').slider( 'values', [ 0, 10000 ] );. However, I am facing an issue where this line triggers the change( event, ui ) event twice. Is there a way to ensure it only triggers ...

javascriptjqueryjquery-uiuisliderrangeslider

Incorporating JavaScript to dynamically load an HTML page into an iframe

I am attempting to have each option load a unique page within a frame <!DOCTYPE html> <html> <head> <script> function selectCountry() { var mylist=document.getElementById("country"); document.getElementById("frame").src=mylist.opti ...

javascripthtmliframe

Identify a CSS style or attribute that is being dynamically assigned using JavaScript

While using the Jquery Cycle plugin for my slideshow, I'm looking to trigger an event when a specific slide is active. The Cycle plugin handles this by adjusting the opacity of images within a div in this manner: <div style="position: absolute; to ...

javascriptcssdynamic

Jest and Enzyme failing to trigger `onload` callback for an image

I'm having trouble testing the onload function of an instance of the ImageLoader class component. The ImageLoader works fine, but my tests won't run properly. Here's an example of the class component: export default class ImageLoader extend ...

javascriptreactjsjestjsenzymejsdom