Fehlinterpretation der Eigenschaften position(relative) und right?

Status
Nicht offen für weitere Antworten.

Admi

Erfahrenes Mitglied
Tja, ich wollte eine neue CSS-Seite bauen und bin auf folgendes Problem gestoßen.
Das Div "box6" wird nicht am rechten Rand angezeigt, sondern unter das Div "box5" geschoben. Welche Änderung ist notwendig, damit box 6 als rechtes Menu auch rechts am Rand klebt und nicht links unten drangequetscht wird?

HTML
HTML:
<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>SSV</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="box1">
    	<div id="box2"></div>
    	<div id="box3">
    		<div id="box4"></div>
    		<div id="box5"></div>
    		<div id="box6"></div>
    	</div>
    </div>
    </body>
    </html>

Style.css
HTML:
/* CSS Document */
    html, body{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-color:#000000;
    color:#000000;
    font-size:10px;
    text-align:left;
    }
    a:link { 
    	font-weight:normal; 
    	text-decoration:none; 
    	color:#000000;
    	}
    a:visited { 
    	font-weight:normal; 
    	text-decoration:none; 
    	color:#FFFFFF;
    	}
    a:hover, a:active {
    	color:#FFCC00;
    }
    #box1{ position:absolute; top:10px; left:10px; width:980px; height:560px; z-index:1; background:red; overflow:auto;}
    #box2{ position:absolute; top:0px; left:0px; width:980px; height:150px; z-index:2; background:blue;}
    #box3{ position:relative; top:150px; left:0px; width:980px; height:410px; z-index:2; background:yellow; overflow:auto;}
    #box4{ position:absolute; bottom:0px; left:0px; width:980px; height:20px; z-index:2; background:white;}
    #box5{ position:relative; top:0px; left:0px; width:150px; height:390px; z-index:2; background:green; overflow:auto;}
    #box6{ position:relative; top:0px; right:0px; width:150px; height:390px; z-index:2; background:lime; overflow:auto;}
 
Status
Nicht offen für weitere Antworten.
Zurück