IFRAMEをウェブページの右半分に配置するにはどうすればよいですか？

Question

私は、2つのDIVを並べて表示する方法を説明する多くの質問があることを認識していますが、私は彼らが推薦するもののほとんどを試しましたが、何も動作していないようです。

ページ上ID「ワークシート」（およびその内容すべて）のDIVがページの左半分を占有し、idが「helpframe」のIFRAMEが右半分を占有するようにします。

現在、私はこのしようとしている：

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

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

をしかし、結果は#helpframeが#worksheetのDIVの下にあるということです。

また、JQueryを使用してヘルプフレームを非表示にしたい場合は、ワークシートDIVを展開してページ全体を占めるようにします。

どうすればこの問題を解決できますか？

Answer 1

ただ、絶対的に正しいトップへiframeを配置：

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

あなたはこのようにjQueryを使用してiframeを非表示にすることができます：

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

は、あなたが使用できるいくつかの既製のアニメーションもあります要素を表示/非表示する：fadeIn/fadeOut/toggleFade/slideIn/slideOut/toggleSlide