witregel / fixed div

Status
Niet open voor verdere reacties.

docock

Gebruiker
Lid geworden
31 okt 2007
Berichten
8
Ik probeer een html pagina te maken bestaande uit 2 delen, een linker en een rechter gedeelte. In het linker gedeelte (div) staat gewone tekst en het rechter gedeelte is fixed, die mag dus niet scrollen, en in die niet scrollbare div staat een iframe. Ik heb onderstaande code voor Internet Explorer bedacht, maar op de één of andere manier zet deze code een witregel de iframe.. Ik heb geen idee waar die vandaan komt.

Wie kan mij helpen die witregel weg te halen, of wie heeft er een andere code voor me ?


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>try this</title>


<style type="text/css">
html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-size: medium;
overflow: hidden;
color: #000;
background-color: #fff;
}

html body{
positon: absolute;
overflow: auto;
margin: 0;
}

#headers *{
left: 48%;
position: absolute;
margin: 0;
padding: 0;
color: #000;
background-color: #ccc;
width: 50%;
height: 100%;
}
</style>
</head>
<body>
<div >
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>

<div id="headers" style="background: red; ">
<iframe name="frame1" scrolling="auto" frameborder="0" src="http://www.zomaareensite.com" style="z-index:1">
Sorry je browser ondersteunt geen iframe
</iframe>
<span id="goliath"></span><br>
</div>
</div>
</body>
</html>
 
Werkte niet.

kijk of deze een beetje wil.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>
		<title>
			try this
		</title>
		
		
<style type="text/css">
html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-size: medium;
overflow: hidden;
color: #000;
background-color: #fff;
}

html body{
overflow: auto;
margin: 0;
}

#tekst
{
float:left;
width:200px;
height:400px;
border: solid #ff0000 2px;
padding:5px;
}
#headers 
{
float:left;
padding: 10px;
color: #000;
background-color: #ccc;
width: 650px;
height: 100px;
border: solid #0000ff 2px;
}

#container
{
width:900px;
margin-left:auto;
margin-right:auto;
border: solid #0000ff 2px;
}
</style>
	</head>
	<body>
		<div id="container">
			<div id="tekst">
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
				test
				<br>
			</div>
			
			<div id="headers" style="background: red; ">
				<iframe name="frame1" scrolling="auto" frameborder="0" src="http://www.helpmij.nl" style="z-index:1" width="100%">
					Sorry je browser ondersteunt geen iframe
				</iframe>
				<span id="goliath">
					gggggggggggg
				</span>
				<br>
			</div>
		</div>
	</body>
</html>
 
Bedankt voor de snelle reactie, de code ziet er goed uit.. alleen als ik meer tekst toevoeg aan de linker kolom, en dan naar beneden scroll.. scrollt de rechter div vrolijk mee, deze rechter div wil ik fixed hebben, dus dat die niet mee scrollt met de linker 'kolom'
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan