Try the following code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
height:300px;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
</style>
<script type="text/javascript">
function clicked(url)
{
document.getElementById('ifr').style.display = "block";
document.getElementById('ifr').src = url;
}
</script>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
<a href="#" onclick="clicked('http://www.google.com');">Google</a><br />
<a href="#" onclick="clicked('http://www.dynamicdrive.com');">Dynamic Drive</a><br />
<a href="#" onclick="clicked('http://www.yahoo.com');">Yahoo!</a><br />
<a href="#" onclick="clicked('http://www.phpfreaks.com');">PHPFreaks</a><br />
<a href="#" onclick="clicked('http://www.amazon.com');">Amazon</a><br />
</p>
</div>
<div id="rightnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<iframe src="" frameborder="0" id="ifr" width="465" height="300" style="display:none;"></iframe>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Click the links available in the left portion of the page the resulting page will be open in the middle portion (as it has more width than the right side in my page).
If this is what you are looking for then it can be customized in such a way that the links will be opened in the right portion rather than the middle one
Junior Coders
help needed
Posting Permissions
Reply With Quote
Bookmarks