Attempting to transition to tableless layouts using divs has been my recent project. A first attempt can be seen in the inner content of this (german) page:
(Shorturl, for testing purposes only and not meant to appear on search engines)
Overall, the progress has been successful! However, I encountered a challenge when trying to dynamically set the height of the list. After some research, I discovered that jQuery is necessary for this task. My initial solution looked like this:
$(window).load(function() {
$(".scrollBox").height($(".gameInfo").height());
});
While the snippet achieved its intended purpose, it had an unintended consequence. It caused the section (div with class "texts") containing the windows icons and text to shift below the entire box. Why did this happen? The layout was flawless without the script, except for the scrollbox not resizing correctly :)
I experimented with setting the height to 2000 in the script, but it resulted in the texts-field being displaced below the box.
If anyone can pinpoint where I went wrong, I would greatly appreciate it :) Thank you in advance!
Best regards,
Marco