1

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?

1
  • @ sanity Jasper's code is better, but in your own code replace float: left with float: right for helpframe.
    – Teemu
    Jan 30, 2012 at 9:52

1 Answer 1

2

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.

4
  • 2
    The float is not necessary, but the width is so the elements don't overlap (well that's your decision). Float only works on relatively positioned elements, when you set the position to absolute the element is taken out of the regular flow of the webpage, this is good for hide/showing elements and animating them because the elements around them in the DOM don't have to be redrawn unless they are directly above/under the element.
    – Jasper
    Jan 30, 2012 at 9:56
  • I understand, so will I need to change #worksheet's width to 100% when I hide the #helpframe?
    – sanity
    Jan 30, 2012 at 9:57
  • The iframe will cover about 4px of the underlying div.
    – Salman A
    Jan 30, 2012 at 9:59
  • 1
    Yeah I added how to change the width using jQuery. I've got to go, I hope this helps.
    – Jasper
    Jan 30, 2012 at 10:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.