Jump to content

Iframe Into <div>


hemst
 Share

Recommended Posts

I have a 3 column layout which I am trying to put a iframe in the centre column.Problem is that when I add the iframe the contents of the right columnare no longer visible (It's force down).What am I doing wrong?Here's the code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">body { font-family: arial, sans-serif; font-size:12px; margin:10px 10px 0px 10px; padding:0px;}#leftcontent { position: absolute; left:10px; top:51px; width:100px; background:#fff; border:0px solid #000;}#centercontent { background:#fff; margin-left: 199px; margin-right:199px; border-left:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000; voice-family: "\"}\""; voice-family: inherit; margin-left: 101px; margin-right:101px;}html>body #centercontent { margin-left: 101px; margin-right:101px;}#rightcontent { position: absolute; right:10px; top:51px; width:100px; background:#fff; border:0px solid #000;}#banner { background:#fff; height:40px; border-top:1px solid #000; border-right:1px solid #000; border-left:1px solid #000; border-bottom:1px solid #000; voice-family: "\"}\""; voice-family: inherit; height:39px;}html>body #banner { height:39px;}p,h1,pre { margin:0px 10px 10px 10px;}h1 { font-size:14px; padding-top:10px;}#banner h1 { font-size:14px; padding:10px 10px 0px 10px; margin:0px;}#rightcontent p { font-size:10px}</style></head><body><div id="banner"> <h1>Testing</h1></div><div id="leftcontent"> <p> <a href="TestServlet">tests</a> </p></div><div id="centercontent"> <iframe name="center" frameborder="0" width="100%" height="90%"> </frame></div><div id="rightcontent"><p>right stuff</p></div></body></html>

Link to comment
Share on other sites

...html>body #centercontent {margin-left: 101px;margin-right:101px;}...html>body #banner {height:39px;}...
What do you want this code to do? It seems the latter of the two makes the HTML element 39 pixels tall, but only if it has an element with "banner" as an ID in its body. :)
Link to comment
Share on other sites

Set a width for your center content. That might fix the problem.It might be best for you to use % rather than pixels.Example...

* {margin: 0;padding: 0;}#contentleft {float: left;width: 10%;height: auto;}#contentmiddle {float: left;width: 80%;height: auto;}#contentright {float: right;width: 10%;height: auto;}

Something a bit like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""DTD/xhtml1-transitional.dtd"><html><head><!-- always use a container --><style type="text/css">* {	margin: 0;	padding: 0;}body { font-family: arial; color: white; }#container {	margin: 0 auto 0 auto;	width: 70%;	height: 1000px;}#top {	text-align: center; 	height: 100px;	background: #000000;	width: 100%;}#leftcontent {	background: red;	float: left;	height: 500px;	width: 10%;}#centercontent {	background: green;	width: 80%;	height: 900px;	float: left;}#rightcontent {	background: blue;	float: right;	width: 10%;	height: 500px;}iframe {	width: 90%;	margin: 5%;	border: 0;}h1 { padding: 2%; }</style></head><body><div id="container"><div id="top"><h1>Title</h1></div><div id="leftcontent"></div><div id="centercontent"><iframe></iframe></div><div id="rightcontent"></div></div></body></html>

Edited by Heartless
Link to comment
Share on other sites

Oke, thanx for your reply.

Set a width for your center content. That might fix the problem.It might be best for you to use % rather than pixels.Example...
* {margin: 0;padding: 0;}#contentleft {float: left;width: 10%;height: auto;}#contentmiddle {float: left;width: 80%;height: auto;}#contentright {float: right;width: 10%;height: auto;}

Something a bit like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""DTD/xhtml1-transitional.dtd"><html><head><!-- always use a container --><style type="text/css">* {	margin: 0;	padding: 0;}body { font-family: arial; color: white; }#container {	margin: 0 auto 0 auto;	width: 70%;	height: 1000px;}#top {	text-align: center; 	height: 100px;	background: #000000;	width: 100%;}#leftcontent {	background: red;	float: left;	height: 500px;	width: 10%;}#centercontent {	background: green;	width: 80%;	height: 900px;	float: left;}#rightcontent {	background: blue;	float: right;	width: 10%;	height: 500px;}iframe {	width: 90%;	margin: 5%;	border: 0;}h1 { padding: 2%; }</style></head><body><div id="container"><div id="top"><h1>Title</h1></div><div id="leftcontent"></div><div id="centercontent"><iframe></iframe></div><div id="rightcontent"></div></div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...