(HTML) Have button open up another html page within the page

Question

I am a newbie to html and css so sorry if this sounds dumb.

How do I create a clickable area that contains two images, text, and whitespace that when clicked, opens ANOTHER html file within the page?

So far I got an html file to appear inside an html file like this:

<object data=EXAMPLE.html width=100% height=100% /> Error </object>

But the problem with that is that you must scroll within the content box to view it, and I would prefer if it expanded the content box indefinitely downward based on how big the html file was.

Answer 1

As @Jarred Farrish pointed out: Regular frames do what you describe. You don't need object elements.

Answer 2

I believe this question becomes a duplicate of this question.

You can make a "button" by creating a div, placing the other elements within the div, and setting an onclick handler on the div itself. You are free to have as much "empty" space, because the emptiness is really the div.

<div class=my_button  onclick=my_button_press();>
    <img src="..."></img>
    <img src="..."></img>
    <span class=my_text>My text here</span>
</div>
<iframe id=my_frame></iframe>

<script>
  function my_button_press() {
     document.getElementById('my_iframe').src = "...";
  }
</script>

Check this example http://jsfiddle.net/b6sdunqj/1/.

You'd want to combine the instruction in the question referenced above with my_button_press() to complete everything.