Question

I want to create two vertical divs using HTML5, CSS3 and JQuery. One Div contains URLs and another div contains the content. When I clicked on a link on div1 the related page should show up in div2.

Example of Page 1 being active:

   DIV1                        DIV2
 **http://www.yahoo.com**      Yahoo Home Page
   http://www.bing.com
   http://www.google.com

Example of Page 2 being active:

  DIV1                         DIV2
  http://www.yahoo.com         Bing Home Page
**http://www.bing.com**
  http://www.google.com 

Answer 1

Working demo at: http://jsfiddle.net/thejase/XWNVn/

HTML

<div id="toc">
    <ul>
        <li><a href="http://www.yahoo.com">Yahoo</a></li>
        <li><a href="http://www.bing.com">Bing</a></li>
        <li><a href="http://www.google.com">Google</a></li>
    </ul>
</div>
<iframe id="content">

</iframe>

CSS

#toc { width: 33%; float: left; margin-right: 1%; }
#content{ width: 66%; margin-top: 1px; border: none; outline: 1px solid black; }

JavaScript

$(function() {
    var $content = $('#content');
    $('#toc a')
        .click(function() {
            $content.attr('src', $(this).attr('href'));
            return false;
        });
});