My (WordPress) page has two divs, ‘main’ and ‘sidebar’. I have a JavaScript that runs on page load to add padding to whichever div is shorter, making the two equal in length so that the background gradients line up properly, e.g.:

However, on any page where I have a Twitter feed displayed in the sidebar, the padding is not evened up properly. Instead, a white box porportional in height to the Twitter feed shows up under the ‘main’ div, e.g.:

I made the Twitter feed shorter, and the white box shrunk accordingly; if I remove the Twitter feed entirely, the box goes away entirely.

My only guess is that the Twitter feed is being inserted into the sidebar after my padding-evening JavaScript runs, but since the JS goes on page load, that really shouldn’t be the case-right?

This is the relevant part of my code:

<body onload="evenupmainandsidebar()">
function evenupmainandsidebar() {
    var mainheight = document.getElementById('main').offsetHeight;
    var sideheight = document.getElementById('sidebar').offsetHeight;
    if (sideheight > mainheight) {
        var pixelated = (sideheight - mainheight) + "px";
        document.getElementById('main').style.paddingBottom = pixelated;
    else if (mainheight > sideheight) {
        var pixelated =  (mainheight - sideheight) + "px";
        document.getElementById('sidebar').style.paddingBottom = pixelated;


Read more here: Twitter feed adding whitespace to page


If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , ,

Wordpress related questions and answers: