Initially, I am looking for a solution using only CSS. While JavaScript can accomplish this easily, I prefer to stick to CSS for now.
On my webpage, I have three containers: two fixed and one static.
The goal is to adjust the padding of the static container to match the height of the fixed container.
The first fixed element has a set height, so setting the padding equal to the height works fine:
#header{
height : 100px;
position : fixed;
}
#content{
padding-top : 100px;
}
However, the height of the second fixed element varies due to dynamic content from a CMS. The layout needs to adapt accordingly.
To better understand what I'm attempting, you can refer to this Fiddle by uncommenting the JS code for the desired result.
P.S.: Compatibility with IE8 and older versions is required.
P.P.S.: I acknowledge that achieving this without JavaScript might be challenging. If it's not feasible, please indicate in the comments.