Jump to content

Iframe Into <div>


hemst

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>

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...