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!