HTML Problem mit der Prozentangabe bei DIV Containern

Nabend zusammen,

ich habe ein Problem mit diesem Quellcode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
       "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title>Navigation</title>
	<style>.bglinks
			{
				display:block;
				background-image:url(bglinks.png);
				position:absolute;top:0%;left:0%;width:150px;height:100%;
			}
			.bgleiste
			{
				display:block;
				background-image:url(leistebuttons.png);
				position:absolute;top:0%;left:0%;width:100%;height:2px;
			}
	</style>
</head>
<body>
<div style="position:absolute;top:5px;left:150px;width:100%;height:100%;"><font size="+2"><center>&Uuml;ber Uns</center></font></div> 
<div class="bglinks"></div> 
<div class="bgleiste"></div> 
</body>
</html>

Und zwar soll der Container:

<div style="position:absolute;top:5px;left:150px;width:100%;height:100%;">  

rechts neben dem 150px breiten container

<div class="bglinks"></div>  

sein und nach rechts hin variabel.
Wenn ich das jetzt allerdings so mache wie dort oben also mit dem "left:150px" und aber "width:100%" dann wird die seite zu breit... weil anscheinend 150px + 100% gerechnet werden. Das heißt die Seite ist 150px zu breit.

Meine Frage ist ob es irgendwas gibt das dem entgegenwirken kann.
zB width:100%-150px oder so in der Art :D

Hoffe auf schnelle Hilfe
MfG Felix

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 83755

Url: https://administrator.de/contentid/83755

Ausgedruckt am: 22.11.2024 um 11:11 Uhr

6 Kommentare

Neuester Kommentar

Ist eigentlich auch logisch oder? Du willst ein Div das 100% breit ist und verschiebst das nach rechts um 150px. Klar das es dann zu breit wird.

Was passsiert wenn du "width:auto;" machst?

Danke für den Tipp aber leider funktioniert dies ebenfalls nicht. Bei width: auto wird der container lediglich an die schriftangepasst.

Momentan fallen mir gerade noch 2 Sachen ein du du mal probieren könntest.
Was geschieht wenn du "position:relative" setzt?

Eine unsaubere Methode wäre noch. Du lässt "width:100%" und setzt dazu "overflow-x: hidden". Wäre zwar nicht schön aber so sieht man den Scrollbalken nicht.

Geliches Problem..
Aber danke für deine Hilfe

Moin,
wie ich sehe( grüner Haken) hast du die Lösung gefunden. Doch bitte sei so nett und lass und nicht dofff sterben.

Gruss,
Dani

Damit ihr nicht dofff sterben müsst :P

Ich habs letztendlich so gemacht:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd">;  
<html>
<head>
<title>Navigation</title>
<style>.bglinks {
 display:block;
 background-image:url(bglinks.png);
 position:absolute;top:0%;left:0%;width:150px;height:100%;
}
.bgleiste {
 display:block;
 background-image:url(leistebuttons.png);
 position:absolute;top:0%;left:0%;width:100%;height:2px;
}

.main {
 margin-left:150px;
}

#content {
 width:100%;
}
</style>
</head>
<body>
<div id="content">  
    <div class="main"><font size="+2"><center>&Uuml;ber Uns</center></font></div>  
    <div class="bglinks"></div>  
    <div class="bgleiste"></div>  
</div>
</body>
</html>