Question

I realize that there are many questions explaining how to get two DIVs to appear side-by-side, but I’ve tried most of what they recommend, and nothing seems to work.

On the page http://www.lastcalc.com/ I want the DIV with id “worksheet” (and all of its contents) to occupy the left half of the page, and the IFRAME with id “helpframe” to occupy the right half.

Currently I’m trying this:

DIV#worksheet {
    float:left;
    width:50%;
}

IFRAME#helpframe {
    float:left;
    width:50%;
}

But the result is that the #helpframe is underneath the #worksheet DIV.

I would also like to be able to use JQuery to hide the helpframe and when I do, the worksheet DIV will expand to occupy the entire page.

How can I achieve this?

Answer 1

Just absolutely position the iframe to the right-top:

#helpframe {
    position : absolute;
    top      : 0;
    right    : 0;
    height   : 100%;
    width    : 50%;
}

You can hide the iframe using jQuery like this:

$(function () {
    $('#some-button').click(function () {
        $('#helpframe').hide();
        $('#worksheet').width('100%');
    });
});

There are also some pre-made animations you can use to show/hide elements: fadeIn/fadeOut/toggleFade/slideIn/slideOut/toggleSlide.