We have 2 options to consider:
1. Setting a fixed height...
To address the issue of excess white space, you can change the width to a larger value such as 250px, which will accommodate lower resolutions but may lead to too much white space on desktop screens.
.inner1{
width:100%;
height:250px;
margin-bottom:0px;
overflow: auto;
}
.inner2{
width:100%;
height:250px;
margin-bottom:0px;
overflow: auto;
}
2. Dynamically calculating height on window resize...
This approach ensures that the layout works well across all resolutions with minimal white space. Here's how:
Start by wrapping the content inside containers like .inner1 and .inner2, using article as an example container. This helps determine the content's height.
Set the height to 100% for both .inner1 and .inner2 elements:
.inner1 {
width: 100%;
height: 100%; /* Set height as 100% */
margin-bottom: 0px;
}
.inner2 {
width: 100%;
height: 100%; /* Set height as 100% */
margin-bottom: 0px;
}
Give .outer container a default height, like 160px:
.outer {
width: 100%;
height: 160px;
top: 0;
position: relative;
}
And finally, include some JavaScript to make everything function correctly ;)
Update
Instead of using an anonymous function, assign your function to a variable.
On window resize, compare the heights of content in inner1 and inner2, select the greater one using Math.max, add a 25px gutter, and set this as the height of .outer container:
var fixWidths = function() {
var
$cDesc = $('.companyDescription');
$cDesc.find('.outer').css(
'height',
Math.max(
$cDesc.find('.inner1').children('article').outerHeight(),
$cDesc.find('.inner2').children('article').outerHeight()
) + 25 // Maximum of the two
)
}
$(window).resize(fixWidths);
fixWidths();
Update
Ensure your JS code is wrapped within...
$(function() {
...
});
This will wait until the document is fully loaded...
Finally, trigger a resize event programmatically to set the initial state accurately.
A functional demonstration
[Please see the updated fiddle](https://jsfiddle.net/2nexo75j/16/)