Dynamische Breite bei Divs?

[FrankS]

Moin - und'n gesundes neues Jahr allerseits!

Ich scheitere im Moment an einem Problem. Ich habe eine Seite mit 3 divs:
links 2 übereinander mit fester Breite für Logo und Menü, rechts daneben eines, in dem der Inhalt der Seite erscheinen soll. Der rechte (Inhalts-)Bereich soll immer die maximal mögliche Breite haben, um dort die Inhalte zentriert anzuzeigen (sonst wird als Breite das breiteste Element im Bereich angenommen, bei jeder Seite ist die Mitte des Bereichs dann an anderer Stelle).

Im Moment mache ich das per JavaScript, da der IE aber innerWidth nicht kennt, muß auch dort wieder eine Krücke her. Das ganze hat u.a. folgenden Nachteil: Verändert der Surfer die Fenstergröße, ändert sich die Größe des Divs nich mit.

Gibt es nicht einen Trick, mit dem der Browser überredet wird, den Bereich immer an die Fenstergröße anzupassen? Damals mit Tabellen war es sooo einfach :)

Ihr findet den Code unter http://www.agapanthus.de/test.htm.

Danke für Eure Antworten,
Gruß Frank

[Markus Trusk]

Hola,
Also was spricht dagegen, dass du ein <div> von width:100% als "Container" machst. Darin ein <div> links mit fixer Breite, so wie du es willst, und daneben noch ein <div>, in dem du den Inhalt mittig ausrichtest, oder habe ich da etwas falsch verstanden?

Markus Trusk.

[Cyx23]

Hallo,

Gibt es nicht einen Trick, mit dem der Browser überredet wird, den Bereich immer an die Fenstergröße anzupassen? Damals mit Tabellen war es sooo einfach :)

wenn du bei "#main { .. left:190px; .." mal margin-left o.ä. probierst, kann die Breite z.B. 100% betragen. Z-index noch überdenken.

Grüsse

Cyx23

[FrankS]

Moin.

Auch Dir und Markus erstmal Danke für Eure Tipps.

wenn du bei "#main { .. left:190px; .." mal margin-left o.ä. probierst, kann die Breite z.B. 100% betragen.

Das Entscheidende war, KEINE Breite anzugeben, siehe meine Antwort auf Maxililians Tipp.

Z-index noch überdenken.

Ja, war nur'n Copy&Paste-Fehler...

Gruß Frank

[Cyx23]

Hallo,

Auch Dir und Markus erstmal Danke für Eure Tipps.

wenn du bei "#main { .. left:190px; .." mal margin-left o.ä. probierst, kann die Breite z.B. 100% betragen.

Das Entscheidende war, KEINE Breite anzugeben, siehe meine Antwort auf Maxililians Tipp.

es gibt sehr wohl, abhängig von Rendermodus oder Browser, auch die Möglichkeit mit margin-left o.ä. (padding) und 100% statt auto zu arbeiten, für den IE 6 klappt es so:

<div style="position:absolute;top:0px;left:0px;width:100px;background-color:silver;z-index:9">
eins
</div>
<div style="position:absolute;top:0px;left:0px;width:100%;padding-left:105px;
background-color:gray;">
zwei
</div>

Grüsse

Cyx23

[Maximilian Baumgart]

Floate Logo und Menü links in einer gemeinsamen Div (ggf. in weitere Divs/ULs unterteilen) oder in seperaten, die mittels clear untereinandergebracht werden und lege 'ne Breite fest (%/em), gib dem Content gegebenenfalls noch einen margin-left, sodass er auch nach Ende des links gefloateten Breichs auf der rechten Seite bleibt.
Oder lass' Logo und Menü absolut positioniert, aber positioniere den Content nicht und gib' ihm einen left-margin, um den Platz für die absolut positionierten Divs freizuhalten.
In beiden Fällen natürlih keine Breite für den Content angeben, dass kalkuliert dann der Browser je nach Viewportgröße etc.
Af der Site, die ich gerade erstelle (http://free.pages.at/maxb88/) verwende ich erstere Methode, falls es dich interessiert...

[FrankS]

Moin.

Oder lass' Logo und Menü absolut positioniert, aber positioniere den Content nicht und gib' ihm einen left-margin, um den Platz für die absolut positionierten Divs freizuhalten.
In beiden Fällen natürlih keine Breite für den Content angeben, dass kalkuliert dann der Browser je nach Viewportgröße etc.

Das war der Knackpunkt! Danke!

Mit einem left-margin hatte ich auch schon experimentiert. Aber immer mit width. Eine Breitenangabe in % bezieht sich ja immer auf das Elternelement, und das ist im meine Fall der sichtbare Bereich des Browserfensters, eine 100% Breitenangebe bedeutet dann, daß die Seite Browserbreite + Div-Breite des Menues wird - und man scrollen muß.

Gruß Frank

[FrankS]

Nochmal Moin.

Da ich den Link in meinem 1. Posting nicht ewig stehen lassen will, hier meine Ausgangsidee und die Lösung fürs Archiv:

******************** mein Versuch **********************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style type="text/css">
<!--
body {
  font-family: Arial, Helvetica, Geneva;
  font-size:10pt;
}

#logo {position:absolute; top:10px; left:10px; width:180px; z-index:1;}
#menu {position:absolute; top:90px; left:10px; width:180px; z-index:1;}
#main {position:absolute; top:10px; left:190px; z-index:2; }

-->
</style>

<script type="text/javascript">
<!--
function zoom() {
  if(document.getElementById){
    if (window.innerWidth){
      document.getElementById("main").style.width = (window.innerWidth  - 192);
    }else{
      document.getElementById("main").style.width = (document.body.offsetWidth - 210);
    }
  }
}
//-->
</script>

</head>
<body onLoad="zoom()">

<!-- kleines Logo -->
<div id="logo" style="border:solid 1px blue;">
logo logo<BR>
logo logo<BR>
</div>
<!-- Ende Logo -->

<!-- Menue -->
<div id="menu" style="border:solid 1px blue;">
Menue<BR>
Menue<BR>
Menue<BR>
Menue<BR>
Menue<BR>
</div>
<!-- Ende Menue -->

<!-- Inhalt der Seite -->
<div id="main" style="background:red; border:solid 1px blue; text-align:center;" >
Inhalt
</div>
<!-- Ende Inhalt -->

</body>
</html>

******************** die Lösung **********************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;CHARSET=iso-8859-1">
<title>test</title>
<style type="text/css">
<!--
body {
  font-family: Arial, Helvetica, Geneva;
  font-size:10pt;
}

#logo { position:absolute; top:10px; left:10px; width:180px; }
#menu { position:absolute; top:90px; left:10px; width:180px; }
#main { margin-left:190px; }

-->
</style>
</head>
<body>

<!-- kleines Logo -->
<div id="logo" style="border:solid 1px blue;">
logo logo<BR>
logo logo<BR>
</div>
<!-- Ende Logo -->

<!-- Menue -->
<div id="menu" style="border:solid 1px blue;">
Menue<BR>
Menue<BR>
Menue<BR>
Menue<BR>
Menue<BR>
</div>
<!-- Ende Menue -->

<!-- Inhalt der Seite -->
<div id="main" style="background:red; border:solid 1px blue; text-align:center;" >
Inhalt
</div>
<!-- Ende Inhalt -->

</body>
</html>

Gruß Frank