load external content in a div

Question

I have three divs with structure as follows:

<div id="1"> 
     <div id=2"><button id="button">Click me</button></div>
     <div id=3"></div>
   </div>

I am trying to load external website to div3 as follows:

$('#div3').html('object style="width:100%" data="https://google.co.in"/>');

Even after this the content is getting displayed in the right side with a small box. How to make it occupy the width and height of the parent div

Edit: I made the div3 css width as 100% still the same

Answer 1

HTML

 <div id="1"> 
         <div id=2"><button id="button">Click me</button></div>
         <div id=3"><iframe src"http://website.com"></iframe> </div>
       </div>

CSS

 #3 iframe{display:none;width:100%;}

calling jquery function

$(document).ready(function(){
  $("#button").click(function(){
  $("#3 iframe").css("display","block");
});
});