I am working on a site that dynamically creates facebook-like buttons through PHP. However <div>, the one that contains the buttons must have a CSS property overflow: hidden;. This is the only way I found it works to make a two-column format, which causes both columns to expand as the length is the longest. The only problem with this method is that any Facebook-like buttons located near the bottom of the container are cut off when someone clicks on them and they expand.

Here is how I tried to solve this problem:

• Using jQuery, I look at all the facebook buttons, like the buttons on the page, and calculate their document offset using the method offset().

• I then clone()each button and also give it absolute positioning and calculated offset using jQuery css(). I hope that each cloned button will be placed in the same position that the button was cloned when I add it to the document.

• Finally, I change every old facebook-like css button visibility: hidden;to make it invisible, but still occupy the space that would have been previously on the page. I add clones of buttons similar to facebook in a div with no property overflow: hidden;using a function appendTo().

  / li>

Here is all my code for this process:

// Replaces functional facebook recommend buttons with identical ones
// in a div where they won't get clipped when they expand.
// Hides the old buttons so space is still left for new ones
$(window).load(function(){
    $(".fb-recommend").each(function(){ // cycle through each recommend button
        var offset = $(this).offset(); // calculate offset of each button
        var newButton = $(this).clone(); // clone the button
        newButton.css({'position':'absolute', 'left':offset.left, 'top':offset.top});
        $(this).css("visibility","hidden"); // hide the old button
        newButton.appendTo("#wrapper"); // put the new button in the wrapper where it won't get clipped
    });
});

, , , , <div>. , , , facebook, , , ( PitaJ , , , 39 ). :

LINK TO TEST WEBSITE

, ( , ), .

. , , !

: , CSS , facebook ( , , ):

#content .fb-recommend {
    margin: 15px 0 5px 0;
}

2: UnLoco min-height CSS fb-reccommend , , ( , ). CSS :

#content .fb-recommend {
    margin: 15px 0 5px 0;
    min-height: 39px;
}

3: , , , IE, CSS :

.fb-recommend {
    min-height: 24px;  // I used 24 because the fb-buttons are 24px in height
}

Final Edit? , IE:

.fb-recommend {
    min-height: 39px;
}

, 39, , 15px fb- + 24px. , , 39 .