right skall vara höger

DinoMedlem sedan sep. 20011 914 inlägg

27 apr. 2009 17:53#1

Skulle vilja att #divBox2 i nedan kod var positionerad till höger istället. Dess högra border skall då ligga samma som #divBox1 högra border.

<!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" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<style type="text/css">
     #divContainer{border:solid 1px #000;padding:10px;height:300px;}
     #divBox1{border:solid 1px green;height:200px;overflow:auto;}
     #divBox2{border:solid 1px red;height:100px;width:400px;position:relative;margin-bottom:-200px;top:-200px;right:0%;}
</style>
<script type="text/javascript">
window.onload = function()
{
var s1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue lacus, varius sagittis, gravida sit amet, iaculis eget, mauris.<br/>';
var e1 = document.getElementById('divBox1');
for(var i = 0;i<50;i++){
      e1.innerHTML += s1
      i++;
   }
}
</script>
</head>
<body><br/><br/><br/>
<div id="divContainer">
   <div id="divBox1"></div>
   <div id="divBox2">
      Login:<br/>
      <input type="text" />
   </div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

voigtann1Medlem sedan juni 20019 519 inlägg

27 apr. 2009 18:35#2

position relative utgår alltid ifrån vad elementet renderas ut "by default". hade inte använd position i ditt fall utan kört float istället.

DinoMedlem sedan sep. 20011 914 inlägg

27 apr. 2009 20:03#3

Blev en kombination av position och float.
Testat i FF3, IE7 och IE8 och det fungerade fint.

#divBox2
{
   border:solid 1px red;
   height:100px;
   width:400px;
   [B]position:relative;[/B]
   margin-bottom:-200px;
   top:-200px;
   [B]float:right;[/B]
}

Tackar för hinten. :)